首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Javascript:在页面加载后添加iframe元素

Javascript:在页面加载后添加iframe元素
EN

Stack Overflow用户
提问于 2010-06-18 21:21:28
回答 2查看 106.9K关注 0票数 32

使用Javascript,我需要找到添加iframe元素的最佳方式,即:

对用户完全隐藏的

  1. 。在页面完全加载后创建的
  2. 。即应该对用户完全不显眼,并且不以任何方式影响图像和其他脚本等的加载。
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-06-18 21:27:15

您可以像这样添加隐藏的iframe

var iframe = document.createElement('iframe');
iframe.style.display = "none";
iframe.src = /* your URL here */;
document.body.appendChild(iframe);

如果需要在页面加载时执行此操作,可以简单地将相关代码放在文档末尾的脚本标记中,或者通过window load event (window.onload = yourFunction;)将其挂钩,尽管window load事件在页面加载过程中发生得很晚。当然,与浏览器上涉及JavaScript的许多事情一样,如果使用PrototypejQueryClosureany of several others等库,您可能会发现自己的工作会更轻松一些,因为这些库可以消除浏览器的差异。(也就是说,上面的代码可以在我熟悉的任何浏览器上运行。)库通常会提供一种在页面加载后立即执行操作的方法,但通常比window更早发生load。jQuery提供ready函数;Prototype提供dom:loaded事件;等等。

例如,如果您将此代码放在body标记的末尾,它将在所有其他内容加载后创建iframe (包括所有图像,直到所有图像加载后,window load才会触发):

<script type='text/javascript'>
window.onload = function() {
    var iframe = document.createElement('iframe');
    iframe.style.display = "none";
    iframe.src = /* your URL here */;
    document.body.appendChild(iframe);
};
</script>
票数 83
EN

Stack Overflow用户

发布于 2018-07-13 21:06:48

如果您想在页面加载后加载多个iFrames,您也可以将其与setTimeout().ready().each()函数结合使用:

标记:

<span class="hidden iframe-holder" data-iframe="https://open.spotify.com/embed/track/6Js1lHzz7gu7XTyvcdLuPa"></span>
<iframe  src=""></iframe>

<span class="hidden iframe-holder" data-iframe="https://open.spotify.com/embed/track/4icHXsDdv3eHfa7g3WQWAP"></span>
<iframe  src=""></iframe>

<span class="hidden iframe-holder" data-iframe="https://open.spotify.com/embed/track/3BukJHUieqwat6hwALC23w"></span>
<iframe src=""></iframe>

<span class="hidden iframe-holder" data-iframe="https://open.spotify.com/embed/track/1Pkj7fCqzg4o6ivPuWU0vB"></span>
<iframe src=""></iframe>

JS (在这种情况下是jQuery -对不起,我来自WordPress宇宙):

jQuery(document).ready(function( $ ) {
  setTimeout(function(){  
    $(".iframe-holder").each(function(){
      var iframesrces = $(this).attr('data-iframe');
      var nextiFrame = $(this).next();
      $(nextiFrame).attr('src',iframesrces);            
    });
  }, 1000);
});

如果您从数据库中动态获取字符串,则此解决方案非常有用。只需确保将iframe源持有者跨度放在DOM中的iframe之前,它会在页面加载后将其data-iframe属性附加到iFrame元素。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3069915

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档