javascript - 延迟 iFrame 加载其 src 直到调用函数？

Question

我有多个动态填充源的 iFrame。 该页面非常慢，因为一次加载了太多 iframe，所以我想阻止它们加载，直到发生特定事件(例如按下每个框架旁边的按钮)。

我考虑过一个 hack，我将源存储到它的名称字段中，然后使用 javascript 将源设置为等于按下按钮时的名称。我不知道这是否行得通，而且这看起来像是一个肮脏的黑客攻击。一定有更好的解决方案吗？

Answer 1

您可以使用 jquery 来构建标记 aync(在事件发生时说话)。

例如:

你有一个 div 容器 <div id"myDiv"></div>

您可以使用 jquery-selector 来获取此 div:

var myDiv = $('#myDiv');

一旦有了这个可访问性，就可以动态地将内容放入其中。

var myIFrame = $('<iFrame></iFrame>');
myIFrame.attr("src", "http://myFavouriteSite.com");

当你围绕这个构建一个函数时，你可以在点击按钮时调用这个函数:

function renderAnIFrame{
  var myDiv = $('#myDiv'); //get selector

  var myIFrame = $('<iFrame></iFrame>'); //dynamicly construct an iFrame
  myIFrame.attr("src", "http://myFavouriteSite.com"); // add sourc-attribute to iFrame

  myDiv.append(myIFrame); //Interlace iFrame into Div-Container
}

所有这一切都发生在使用 document-ready 的按钮点击事件上:

    <button type="button" id="btn-render-iFrame">
     </button>

$(document).ready(function () {
    $('#btn-render-iFrame').click(function () {
        renderAnIFrame ();
    });
});