blocks|key|307380|text|您可以像这样添加隐藏的iframe：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|307381|var+iframe+=+document.createElement('iframe');
iframe.style.display+=+"none";
iframe.src+=+/*+your+URL+here+*/;
document.body.appendChild(iframe);|code-block|syntax|javascript|307382|如果需要在页面加载时执行此操作，可以简单地将相关代码放在文档末尾的脚本标记中，或者通过window+load+event+(window.onload+=+yourFunction;)将其挂钩，尽管window+load事件在页面加载过程中发生得很晚。当然，与浏览器上涉及JavaScript的许多事情一样，如果使用Prototype、jQuery、Closure或any+of+several+others等库，您可能会发现自己的工作会更轻松一些，因为这些库可以消除浏览器的差异。(也就是说，上面的代码可以在我熟悉的任何浏览器上运行。)库通常会提供一种在页面加载后立即执行操作的方法，但通常比window更早发生load。jQuery提供ready函数；Prototype提供dom:loaded事件；等等。|307383|例如，如果您将此代码放在body标记的末尾，它将在所有其他内容加载后创建iframe+(包括所有图像，直到所有图像加载后，window+load才会触发)：|307384|<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>|307385|entityMap|0|LINK|mutability|MUTABLE|url|http://prototypejs.org/|1|http://jquery.com/|2|http://code.google.com/closure/library|3|http://en.wikipedia.org/wiki/List_of_JavaScript_libraries^0|B|6|0|0|17|6|1E|4|1Q|T|2R|6|2Y|4|89|6|8J|4|8W|5|9F|A|4E|9|0|4O|6|1|4V|7|2|53|L|3|0|C|4|1P|6|1W|4|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]]|D|@$9|1R|A|1S|1|1T]|$9|1U|A|1V|1|1W]|$9|1X|A|1Y|1|1Z]|$9|20|A|21|1|22]]|E|$]]|$1|M|3|N|5|6|7|23|8|@$9|24|A|25|B|C]|$9|26|A|27|B|C]|$9|28|A|29|B|C]]|D|@]|E|$]]|$1|O|3|P|5|H|7|2A|8|@]|D|@]|E|$I|J]]|$1|Q|3|-4|5|6|7|2B|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]|10|$5|T|U|V|E|$W|11]]|12|$5|T|U|V|E|$W|13]]]]

<p>You can add a hidden <code>iframe</code> like this:</p>

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

<p>If you need to do that on page load, you can simply put the relevant code in a script tag at the end of your document, or hook it up via <code>window</code> <code>load</code> event (<code>window.onload = yourFunction;</code>), although the <code>window</code> <code>load</code> event happens quite late in the page load process. And of course, like many things involving JavaScript on browsers, you may find your life is a bit easier if you use a library like <a href="http://prototypejs.org" rel="noreferrer">Prototype</a>, <a href="http://jquery.com" rel="noreferrer">jQuery</a>, <a href="http://code.google.com/closure/library" rel="noreferrer">Closure</a>, or <a href="http://en.wikipedia.org/wiki/List_of_JavaScript_libraries" rel="noreferrer">any of several others</a>, as these can smooth out browser differences. (That said, the above code will work on any browser I'm familiar with.) Libraries will typically offer a way of doing things as soon as the page is loaded, but earlier than <code>window</code> <code>load</code> typically happens. jQuery provides the <code>ready</code> function; Prototype provides the <code>dom:loaded</code> event; etc.</p>

<p>For instance, if you put this at the end of your <code>body</code> tag, it will create the iframe after <em>everything</em> else has loaded (including all images, <code>window</code> <code>load</code> doesn't fire until all images have loaded):</p>

<pre><code>&lt;script type='text/javascript'&gt;
window.onload = function() {
    var iframe = document.createElement('iframe');
    iframe.style.display = "none";
    iframe.src = /* your URL here */;
    document.body.appendChild(iframe);
};
&lt;/script&gt;
</code></pre>


blocks|key|3251796|text|如果您想在页面加载后加载多个iFrames，您也可以将其与setTimeout()、.ready()和.each()函数结合使用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3251797|标记：|3251798|<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>|code-block|syntax|javascript|3251799|JS+(在这种情况下是jQuery+-对不起，我来自WordPress宇宙)：|3251800|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);
});|3251801|如果您从数据库中动态获取字符串，则此解决方案非常有用。只需确保将iframe源持有者跨度放在DOM中的iframe之前，它会在页面加载后将其data-iframe属性附加到iFrame元素。|3251802|entityMap^0|T|C|16|8|1F|7|0|0|0|0|0|1Y|B|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|T|$]]

<p>If you like to load multiple iFrames after your page has loaded you can also combine it with a <code>setTimeout()</code>, <code>.ready()</code> and <code>.each()</code> function:</p>

<p>Markup:</p>

<pre><code>&lt;span class="hidden iframe-holder" data-iframe="https://open.spotify.com/embed/track/6Js1lHzz7gu7XTyvcdLuPa"&gt;&lt;/span&gt;
&lt;iframe  src=""&gt;&lt;/iframe&gt;

&lt;span class="hidden iframe-holder" data-iframe="https://open.spotify.com/embed/track/4icHXsDdv3eHfa7g3WQWAP"&gt;&lt;/span&gt;
&lt;iframe  src=""&gt;&lt;/iframe&gt;

&lt;span class="hidden iframe-holder" data-iframe="https://open.spotify.com/embed/track/3BukJHUieqwat6hwALC23w"&gt;&lt;/span&gt;
&lt;iframe src=""&gt;&lt;/iframe&gt;

&lt;span class="hidden iframe-holder" data-iframe="https://open.spotify.com/embed/track/1Pkj7fCqzg4o6ivPuWU0vB"&gt;&lt;/span&gt;
&lt;iframe src=""&gt;&lt;/iframe&gt;
</code></pre>

<p>JS (in this case jQuery - sorry I'm from the WordPress cosmos):</p>

<pre><code>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);
});
</code></pre>

<p>This solution is useful if you get your strings dynamically from a database. Just make sure that you place the iframe source holder span "before" your iframe in the DOM and it will attach its <code>data-iframe</code> attribute to the iFrame element after your page has been loaded.</p>


<p>Using Javascript I need to find the best way to add a iframe element that is:</p>

<ol>
<li>Completely hidden from the user.</li>
<li>Created after the page has fully loaded. i.e. Should be completely unobtrusive to the user and not affect loading of images and other scripts etc, in any way.</li>
</ol>


Javascript: add iframe element after page has loaded

数据库

WordPress

jQuery

使用Javascript，我需要找到添加iframe元素的最佳方式，即：对用户完全隐藏的。在页面完全加载后创建的。即应该对用户完全不显眼，并且不以任何方式影响图像和其他脚本等的加载。

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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