使用Javascript,我需要找到添加iframe元素的最佳方式,即:
对用户完全隐藏的
发布于 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的许多事情一样,如果使用Prototype、jQuery、Closure或any 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>
发布于 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元素。
https://stackoverflow.com/questions/3069915
复制相似问题