如何避免加载 iframe 的源代码答案

【问题标题】：how to avoid loading the source for iframe如何避免加载 iframe 的源代码
【发布时间】：2013-08-27 02:01:18
【问题描述】：

我想提高一个页面的加载性能，该页面有一个按钮来触发最初隐藏在页面上的弹出窗口（使用 twitter 引导程序中的“模态”组件）。此弹出正文包含一个 iframe，该源在页面初始加载时加载，但加载时间增加了大约 30-40%。在单击按钮之前不需要加载 iframe 源，这会弹出带有 iframe 的弹出窗口。如何避免在初始页面加载时加载 iframe 源？ ...仅在单击按钮时加载 iframe 源？这里可以用JS吗？如果是这样，那么如何或什么方法/库？有没有比隐藏在页面中的 iframe 弹出窗口更好的方法来缩短加载时间？谢谢你

【问题讨论】：

标签： javascript jquery performance iframe

【解决方案1】：

这可以通过 JavaScript 实现（不需要额外的库）。单击链接或按钮时，只需使用一个函数来设置 src/显示框架。

function loadIFrame(frameID, url) {
    var frame = document.getElementById(frameID);
    frame.setAttribute('src', url);
    frame.style.display = 'block';
}

请参见此处的示例： http://jsfiddle.net/ZNGmy/

【讨论】：

谢谢奥斯卡……它运作良好。我使用 jquery 库如下：
jQuery(document).ready(function($){ $('#start-demo').bind("click", function(){ var frame = $('#demo-frame'); frame.attr('src', demoUrl); $('#myModal').modal('show'); }); });

【解决方案2】：

与其将弹出窗口作为隐藏容器并通过按钮显示，不如将带有 iframe 内容的弹出窗口作为单独的 html 页面，通过按下按钮显示。这样在按下按钮之前不会加载内容。

此链接有一个弹出 html 页面的示例。 http://allwebco-templates.com/support/S_add_pop.htm

【讨论】：

谢谢 jtmulls18。为避免生成 html 页面，我们采用 Oscar 方法，但是，您的方法将来可能会在不同情况下运行良好
感谢拉脱维亚人的反馈。