`

理解IFRAME之iframe与js之争

阅读更多

        Iframes 提供了一个在页面中嵌入其它网站页面的简便方法,但应慎重使用。创建IFRAME比创建任 何其他类型的DOM元素(包括脚本和样式表)耗时多出1-2个数量级. 创建100个不同类型元素的时间展示了IFRAME多么的耗时.

页面通常不会使用太多数量的IFRAME,因此创建dom的时间也不是一个大问题,问题是这涉及到onload事件和并发连接池

Iframes 阻塞onload事件

尽快产生window的 onload事件是很重要的。这个事件会引发浏览器状态指示到达“完毕”状态,通知用户页面已经下载完毕。当onload事件被延迟,给用户的感受是页面变的更慢了

window的onload事件在所有的iframe和iframe内所有元素完全下载后才能触发。 在 Safari 和 Chrome浏览器内,通过JavaScript动态设置iframe的src属性可以避免这种阻塞行为

并发连接池

浏览器对任何一个给定的web服务器只打开一定数量的连接。 比较老的浏览器,包括Internet Explorer 6 7 、Firefox 2, 对一个域名默认仅打开2个连接。在新型浏览器内这个限 制被提高了,Safari 3+ 、Opera 9+ 对一个域名默认打开4个连接,Chrome 1+, IE 8, Firefox 3 对一个域名默认打开6个连接。 你可以查看下面这个表格并发连接汇总.

有人可能希望一个iframe有它自己单独的并发连接池,但是事实并不是这样。在所有主流浏览器中,连接池是被页面和iframe共享的。这意味着有可能一个iframe内的资源占据了所有 可用的连接并阻塞了主页面的资源下载。如果iframe内的内容和主页面一样重要或者更重要,这是没有问题的。但如果iframe不太重要,iframe占用连接是不可取的。一个解决办法是在 更高级别的资源下载之后,动态设置iframe的src属性动态加载内容

美国10大网站中5个使用了iframe。大多数情况下,它们常用来加载广告。这是不幸的,但可以理解,因为使用iframe插入广告内容很容易实现。在许多情况下,iframe是合乎逻辑的 解决方案。但要记住他们会对你的页面产生性能影响。尽可能避免使用iframe,当必须使用时,要有节制的使用它们

分享到:
评论

相关推荐

    js调用-嵌入iframe

    综上所述,"js调用-嵌入iframe"涉及到的主要知识点包括IFrame的基本使用、JavaScript与IFrame的交互以及测试中的注意事项。理解并掌握这些内容,对于网页开发尤其是动态内容加载和页面组件的复用具有重要意义。

    动态创建iframe,并动态添加js执行代码

    在IT行业中,动态创建iframe和动态添加JavaScript代码是一种常见的技术,尤其在页面加载后需要异步加载内容或者实现跨域通信时。以下是对这个主题的详细讲解。 首先,`iframe`(Inline Frame)是HTML中的一种元素,...

    JS去除iframe滚动条的方法

    在介绍JS去除iframe滚动条的方法之前,首先需要理解iframe元素在HTML中的作用。iframe元素代表了一个嵌入的网页,允许在一个HTML页面中嵌入另一个文档,这在多种场景下非常有用,比如页面中嵌入第三方应用的界面等。...

    js获取控制iframe中iframe的src

    js控制/获取a.html中iframe加载的b.html中的iframe,很多人都以为getElementById可以直接获取,其实不行的,以上代码就解决了这个问题,js控制iframe加载页面的iframe,不过测试只在IE和火狐通过,谷歌不行,其他自...

    javascript写的可拖动的iframe

    然后,我们关注到"ifrWin.js",这是一个JavaScript文件,实现了iframe的拖动逻辑。在这个文件中,我们需要创建一个类来处理iframe的拖动事件。这个类可能包含初始化方法、事件监听器(如`mousedown`、`mousemove`和`...

    解决JS跨域访问IFrame的解决方案

    在Web开发中,JavaScript(JS)的同源策略限制了不同源之间进行交互,包括从一个页面中的脚本访问另一个不同源的IFrame内容。"解决JS跨域访问IFrame的解决方案"这一主题关注的就是如何克服这个限制,使得在JSP页面中...

    js处理iframe的系列问题

    ### JavaScript处理iframe的相关知识点 在Web开发中,`iframe`(Inline Frame)是一种常见的HTML元素,用于嵌入另一个HTML文档到当前文档中。利用JavaScript可以实现对`iframe`中的元素进行操作,例如读取或修改...

    js调用iframe实现打印页面内容的方法

    JavaScript(简称JS)提供了多种方式来实现网页内容的打印,包括打印整个页面或页面上的特定区域。本知识点主要介绍如何使用JS调用iframe元素来实现页面内容的打印功能。 ### 知识点一:使用iframe实现区域打印 ...

    js iframe 打印 打印预览 页眉页脚的设置

    在JavaScript(JS)中,利用iframe进行打印和打印预览是常见的需求,特别是在网页开发中。这个场景下,我们可能需要自定义页眉和页脚,以提供更专业的打印效果。下面将详细介绍如何通过JS实现这个功能。 首先,我们...

    js实现iframe自适应高度

    首先,理解`iframe`的基本结构和属性是至关重要的。`iframe`标签通常包含`src`属性,用于指定要加载的网页地址,以及`height`和`width`属性,定义了`iframe`的尺寸。然而,这些静态属性无法自动调整以适应内容的变化...

    JS操作iframe里的dom(实例讲解)

    在JavaScript中,操作`iframe`内的DOM元素是常见的需求,特别是在构建复杂的网页应用时。`iframe`(Inline Frame)是一种可以在HTML文档中嵌入另一个HTML文档的元素,它允许我们实现页面分隔、加载外部资源或者创建...

    js 实现iframe 之间传值

    JavaScript遵循同源策略,这意味着来自不同源(协议+域名+端口)的`iframe`之间默认无法通过JavaScript进行通信。为了解决这个问题,我们可以利用`window.postMessage()`方法,它允许跨域通信。 2. `window.post...

    基于iframe的js动态标签tab

    在网页开发中,"基于iframe的js动态标签tab"是一个常见的功能实现,它结合了JavaScript、IFrame和Tab标签页的特性,为用户提供了一个交互式的浏览体验。这种技术主要用于在单个页面上加载和切换多个独立的内容区域,...

    javascript动态调整iframe高度

    由于同源策略的限制,只有当`iframe`的源与包含它的页面在同一域下时,我们才能直接访问`iframe`的内容。若不在同一域,我们需要通过`window.postMessage`进行跨域通信。假设我们在同源环境下,可以通过`iframe....

    iframe自适应高度js demo

    在网页开发中,`iframe`(Inline Frame)是一种嵌入式框架元素,它允许我们在一个HTML文档中嵌入另一个HTML文档。...通过查看并运行这些文件,你可以更好地理解并实践`iframe`自适应高度的JavaScript解决方案。

    JS页面跳转和js对iframe进行页面跳转、刷新

    在IT领域,特别是前端开发中,JavaScript(简称JS)被广泛用于实现网页的动态功能,包括页面跳转和对iframe内的页面进行跳转与刷新。本文将深入解析JS页面跳转的各种方法,以及如何利用JS操作iframe进行页面跳转和...

    JS获取iframe内容【简化版】

    本文将详细介绍如何通过JavaScript(简称JS)来获取一个内嵌在当前页面中的iframe的内容。这种方法特别适用于那些需要动态加载或更新iframe内部数据的应用场景。我们将从基本原理出发,逐步深入到具体的实现细节,并...

    基于js的iframe 可关闭tab标签组件使用方法

    在网页开发中,JavaScript(js)经常被用来增强用户体验,特别是在构建动态交互式的用户界面时。本教程将详细讲解如何使用JavaScript实现一个可关闭的iframe内嵌tab标签组件。这个组件能够帮助用户在同一个页面中...

    iframe框架\JS获取iframe元素

    ### iframe框架与JavaScript获取iframe元素详解 #### 一、引言 `iframe`是非标准HTML标签,最初由Internet Explorer浏览器引入并推广,随后被Mozilla等其他浏览器所支持。`iframe`的主要用途是在当前网页中嵌入另一...

    自动调节iframe高度,而不显示其滚动条 js

    ### 自动调节iframe高度,而不显示其滚动条 js #### 背景介绍 在网页开发过程中,经常会遇到需要在一个页面内嵌入另一个页面的情况,这时通常会使用HTML中的`iframe`元素来实现。然而,当嵌入的内容高度不确定或者...

Global site tag (gtag.js) - Google Analytics