Question

我的网站中有一个页面，里面有大约60个iframe元素。这些iframe包含在w3-modals div中，但是一旦页面加载就会被加载，导致页面加载速度非常慢。是否有可能当用户点击按钮加载w3模式时，他们可以加载iframe然后帮助加载页面加载时间。

任何帮助都会非常感谢！但是如果可能的话，请保持简单，因为我不熟悉编码。

非常感谢！

以下是我使用的代码：

加载模式的按钮

<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">

Answer 1

我认为你的方式不正确。加载60个不同的页面是疯狂的，并且您的计算机和浏览器肯定会受此影响。

我认为更好的方法是（如你所说）按照要求加载你的iframe。我假设你的所有iframe都被隐藏了（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>

您首先使用数据属性button定义了data-open-modal，表示此按钮将打开模式。接下来，您的模态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
    });
});

我还没有测试过这段代码，但它应该可以运行！

Answer 2

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

用户点击模态时加载iframe

2 个答案: