Question

我在大多数项目中使用iframe。他们嵌入了从广告到赞助商到公告的各种内容。很多人都联系过我，询问为什么页面需要很长时间才能加载，我只是简单地回答＃34;技术问题＆＃34;。实际页面内容加载，它只是保持加载。我还使用了一些宽度和高度都没有框架边框的iframe。

我正在尝试让页面说明已加载，但在后台加载iframe。我到处搜索，没找到答案。我找到的最接近的是如何使iframe在加载时间中成为最低优先级。

我试过这个：

(function(d){
var iframe = d.body.appendChild(d.createElement('iframe')),
doc = iframe.contentWindow.document;

// style the iframe with some CSS
iframe.style.cssText = "position:absolute;width:200px;height:100px;left:0px;";

doc.open().write('<body onload="' + 
'var d = document;d.getElementsByTagName(\'head\')[0].' + 
'appendChild(d.createElement(\'script\')).src' + 
'=\'\/path\/to\/file\'">');

doc.close(); //iframe onload event happens

})(document);

我试过这个：

＆＃13;

$(window).bind("load", function() {
  $('#backup').prepend('<iframe src="https://web.archive.org/save/https://ppyazi.com/" width="0" height="0"></iframe>');
});
$(window).bind("load", function() {
  $('#uggaustraliancollection').prepend('<iframe src="https://web.archive.org/web/20180314120100/https://www.instagram.com/uggaustraliancollection/" width="100%" height="400"></iframe>');
});
$(window).bind("load", function() {
  $('#zuper').prepend('<iframe src="https://ppyazi.com/zuper/wall.php?username=quix" width="0" height="0"></iframe>');
});

＆＃13;

<a href="https://www.instagram.com/uggaustraliancollection/" class="list-group-item list-group-item-action">
<?php $total = file_get_contents('stats.php') + 0.0001;
?>
<div id="uggaustraliancollection"></div>
<script type="text/javascript" src="//ylx-1.com/bnr.php?section=General&pub=315858&format=300x50&ga=g&mbtodb=1"></script> <noscript><a href="https://yllix.com/publishers/315858" target="_blank"><img alt=" " src="//ylx-aff.advertica-cdn.com/pub_2hpya3.png" style="border:none;margin:0;padding:0;vertical-align:baseline;" /></a></noscript>
<span class="badge badge-dark">Advertisment</span>
</a>

＆＃13;

Answer 1

由于您表示没有链接的答案有效，因此这是我测试过的片段并且适用于我。建立目标div，我使用jQuery脚本在页面加载时将整个iframe附加到其内容。

在HTML中

<div id="cool_thing"></div>

在jQuery脚本中：

$(window).bind("load", function() {
  $('#cool_thing').prepend('<iframe src="https://www.weather.gov/" width="680" height="380"></iframe>');
});

这是工作的起点。我可以想象将它与在函数运行时替换/删除的静态图像相结合，并且很难区分它们。

Answer 2

我认为这就是你想要的。

对于多个iframe： -

<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body onload="iframeload()">
<iframe id="iframe1"></iframe>
<iframe id="iframe2"></iframe>
<script>
function iframeload() {
var iframe = document.getElementById("iframe1");
iframe.src = "pagename1.html";
var iframe = document.getElementById("iframe2");
iframe.src = "pagename2.html";
}
</script>
</body>
</html>

单个iframe： -

<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body onload="iframeload()">
<iframe id="iframe"></iframe>
<script>
function iframeload() {
var iframe = document.getElementById("iframe");
iframe.src = "pagename.html";
}
</script>
</body>
</html>

阻止iframe影响加载时间

2 个答案: