當用戶點擊模式時加載iframe

我在我的網站中有一個頁面，裏面有大約60個iframe元素。這些iframe包含在w3-modals divs中，但是隻要頁面加載就會加載，導致頁面加載非常緩慢。是否有可能當用戶點擊按鈕來加載w3模式，他們的iframe可以加載，然後幫助頁面加載時間。當用戶點擊模式時加載iframe

任何幫助將非常讚賞與此！但如果可能的話，請保持簡單，因爲我是編碼新手。

非常感謝！

下面是代碼im使用：

按鈕加載模態

<button onclick="document.getElementById('id03').style.display='block'" class="w3-btn w3-light-blue">Instruction</button>

模態碼

<div id="id03" class="w3-modal"> 
     <iframe src="http://" frameborder="0" height="700px" style="width: 800px">

來源

2016-03-14 kcoates112

我覺得[this]（http://stackoverflow.com/questions/7177080/how-do-i-load-an-url-in-iframe-with-jquery）會幫助你。這個問題看起來一樣。 –

我認爲你正在採取這種不正確的方式。加載60個不同的網頁是瘋狂的，並且肯定你的電腦和瀏覽器正在遭受這種痛苦。

我認爲一個更好的方法是（如你所說）加載你的iframe的請求。我假設你所有的I幀被隱藏（和you are using this modal system），所以我們可以做這樣的事情：

<button class="w3-btn w3-light-blue" data-open-modal="id03">Instruction</button> 
<div id="id03" class="w3-modal" data-url="your-iframe-url"></div>

您首先用數據屬性data-open-modal定義的button這表明，此按鈕將打開一個模式。接下來，您的模態爲div，其中data-url定義了要在iframe中使用的網址。所以，這是JavaScript這樣的伎倆（使用jQuery，對不起香草沒時間）：

// We find all the buttons 'data-open-modal' 
$('[data-open-modal]').click(function (e) { 
    // We get the ID of the modal to open 
    var modalId = $(this).data('open-modal'); 
    // We set a modal reference (shortcut) 
    var $modal = $(modalId); 
    // We get the iframe URL from the modal data-url 
    var iframeURL = $modal.data('url'); 
    // We show the modal 
    $modal.display(); // display: block; 
    // We create the iframe inside using the URL 
    $modal.append('<iframe src="' + iframeURL + '" frameborder="0" height="700px" style="width: 800px">'); 
    // We bind a click event when the user clicks on the "X" to close the modal and whe delete the iframe 
    $modal.find('.w3-closebtn').on('click', function (e) { 
     $modal.find('iframe').remove(); // Delete the iframe 
    }); 
});

我還沒有測試此代碼，但它應該工作！

來源

2016-03-14 15:42:45 nikoskip

var your_source = $('#source').val(); 
$("#button").click(function() { 
     $("iframe").attr("src", your_source); 
});

來源

2016-03-14 16:27:24

請描述這是做什麼以及爲什麼你選擇這樣做，這樣你可以幫助教育讀者。 –

當用戶點擊模式時加載iframe

回答

相關問題