在引導模式下加載iframe

Question

我想將iframe加載到引導模式中並在加載iframe之前顯示加載器。我正在使用簡單的jquery點擊功能，但它不起作用。我不明白爲什麼它不起作用。 fiddle整版fiddle

$('.btn').click(function() { 
    $('.modal').on('show',function() {  
     $(this).find('iframe').attr('src','http://www.google.com') 
    }) 
    $('.modal').modal({show:true}) 
    $('iframe').load(function() { 
     $('.loading').hide(); 
    }); 
}) 

Answer 1

$('.modal').on('shown.bs.modal',function(){  //correct here use 'shown.bs.modal' event which comes in bootstrap3 
    $(this).find('iframe').attr('src','http://www.google.com') 
}) 

如上圖所示使用'shown.bs.modal'事件，進來引導3

編輯： -

，只是嘗試從而非google.com iframe中打開某些其他URL，它不會允許您由於某些安全威脅而打開google.com。

原因是Google正在發送「X-Frame-Options：SAMEORIGIN」響應標題。此選項可防止瀏覽器顯示與父頁面不在同一域中的iFrame。

Answer 2

模態負載引導事件引導改爲3

只需使用shown.bs.modal事件：

$('.modal').on('shown.bs.modal', function() { 
    $(this).find('iframe').attr('src','http://www.google.com') 
}) 

更可以在下面的鏈接時發現：

http://getbootstrap.com/javascript/

Answer 3

看來你

$(".modal").on('shown.bs.modal') // One way Or 

可以在輕微不同的方式做到這一點，像這樣

$('.btn').click(function(){ 
    // Send the src on click of button to the iframe. Which will make it load. 
    $(".openifrmahere").find('iframe').attr("src","http://www.hf-dev.info"); 
    $('.modal').modal({show:true}); 
    // Hide the loading message 
    $(".openifrmahere").find('iframe').load(function() { 
     $('.loading').hide(); 
    }); 
}) 

Answer 4

您可以簡單地使用this bootstrap helper to dialogs（僅5 KB）

它支持ajax請求，iframes，常用對話框，確認並提示！

，你可以使用它作爲：

eModal.iframe('http://someUrl.com', 'This is a tile for iframe', callbackIfNeeded); 

eModal.alert('The message', 'This title'); 

eModal.ajax('/mypage.html', 'This is a ajax', callbackIfNeeded); 

eModal.confirm('the question', 'The title', theMandatoryCallback); 

eModal.prompt('Form question', 'This is a ajax', theMandatoryCallback); 

這提供加載進度，同時加載了iframe！

無需HTML文件。

您可以使用對象文字作爲參數添加選項。

查看網站表格更多詳細信息。

最好，

Answer 5

我碰到這個implementation在Codepen來了。我希望你覺得這對你有幫助。

this.on('hidden.bs.modal', function(){ 
     $(this).find('iframe').html("").attr("src", ""); 
    });