深入理解iframe

本文并不是一篇iframe API文档讲解,因此想了解iframe API的同学请移步 MDN, 我将在现在浏览器的角度与大家取探讨iframe, 因此,本文中虽然会提及一些iframe在旧浏览器中的应用, 但并不会去讲解。 所以,您对iframe在旧浏览器中的应用场景感兴趣的话,还请自己搜索相关资料。 同时, 我也会从浅入深的来与大家探讨iframe中的一些特性、各种现代浏览器中的渲染模式、应用场景、以及在现代开发中的影响。

什么是iframe

在HTML中有三种结构特征:树结构、层次结构、框结构。iframe正是框结构中的一员。每个iframe中都是一个独立的沙箱,它们拥有自己的window以及DOM。

为什么需要理解它

虽说在日常开发中,我们应尽量少使用iframe,但在一些特殊场景下,我们也是不可避免需要使用iframe。因此,深入理解iframe能够让我们更合理的使用它。

渲染与阻塞

前面讲到iframe是HTML三种结构中的框结构,框结构中还有另外两个元素:framesetframe,但它们都已废弃,不再推荐使用。
每一个框结构都有一个独立的HTML文档,而不包含以上三种框结构中任意一种的网页就是最简单的框结构。其示图如下:

frame.png

对应的,复杂的框结构即多个框结构复合在一个页面中, 其示图如下:


frames.png

像上图中的多框结构,非常不适合移动端,因为这种结构的页面多触控操作非常不友好。 到此,对于框结构的基础知识普及便告一段落了, 下面笔者将分别从 Chrome、Firefox、Safari、IE 11的测试结果来分析iframe在不同浏览器中的渲染模式以及阻塞情况,代码如下:
我们先定义iframe要引用的页面,并编写如下代码:

const start = Date.now();
const limit = function() {
return Date.now() - start;
}
while(limit() <= 1000 * 5) {}

接下来, 在主页面中引入它:

<iframe src="./frame-sets.html"></iframe>

代码很简单, 就是让iframe 阻塞至少5秒钟,接下来分别在 Chrome、Firefox、Safari、IE11 中测试阻塞情况:

Chrome Firefox Safari IE11
阻塞主页面渲染 false true true true
阻塞主页面onload true true true true

从结果来看,阻塞onload并无异议,从来都是如此,但是惊讶的发现在Chrome中并不会阻塞主页面的渲染, 我猜Chrome为iframe创建来一个单独的沙箱进程吧。

无阻塞加载iframe

前面讲了iframe与阻塞,在不同的浏览器中表现大致相同(只有Chrome不会阻塞主页面渲染,onload则都会受到阻塞)。在极大多数情况下,iframe都会阻塞主页面的渲染, 所以我们急需采用一种不阻塞主页面渲染的加载iframe的方式。那如果才能做到无阻塞加载iframe呢?思路有二:1. 直接使用setTimeout异步加载iframe;2. 在页面触发onload之后加载iframe。话不多说, 直接亮代码:

// setTimeout 形式
setTimeout(function() {
frame.src = 'other-page-url';
}, 0);

这种方式十分简洁, 但是需要注意的是, 如果你需要在页面onload后执行某些操作的时候, 需要在 setTimeout 回调中去绑定load函数。

window.addEventListener('load', function() {
iframe.src = 'other-page-url';
});

这种方式也是简单粗暴,而且没有setTimeout方式灵活, 没办法准确到iframe加载完后, 在主页面做一些操作。

iframe与跨域

跨域是我们开发过程中经常遇到的问题,而如何解决跨域的问题, 网络上已经有非常多可行的方案, 至于最终选择何种方案去处理, 还得结合实际业务场景选择最合适的方案。接下来,我们将缩小解决方案的范围, 只限定在iframe中去讲解几种跨域方案。
为了模拟跨域, 我们更改本地hosts。 以mac os 为例:
cd //
cd private/etc
vim hosts
添加如下代码:

127.0.0.1    demo.com
127.0.0.1    cross.demo.com
127.0.0.1    other.com
  • 方案一:
    document.domain,这是浏览器暴露出来的一个准只读属性(之所以说它是准只读属性,是因为它可以设置为当前域名的超级域),利用这个特性,可以实现主域名相同子域名不同的网页实现通信。代码如下:
    main.html(http://demo.com:15100/main.html)
document.domain = 'demo.com';
window.alertFrameMsg = function(msg) {
alert(msg);
}
const frame = document.querySelector('#myFrame');
frame.src = 'http://cross.demo:15100/frame-sets.html';

frame-sets.html(http://cross.demo:15100/frame-sets.html)

document.domain = 'demo.com';
parent.alertFrameMsg('hello, world!');

如你所见, 只需要将两者的document.domain设置为超域, 就可以实现主页面与iframe的跨域通信了。而且相互之间的访问非常自由(可以双向通信)

  • 方案二:
    window.postMessage ,HTML5提供的API,可以安全的启用跨域通信。语法非常简单:targetWindow.postMessage(data, targetOrigin),第一个参数是要传递的数据,令人高兴的是将要发送到目标window的数据,会采用结构克隆化算法序列化, 这意味着我们无需自己序列化,即可安全的传输数据对象到目标window。如何在目标窗口接收到数据呢?编写如下代码即可:
window.addEventListener('message', function(evt) {
console.log(evt.data);
}, false);

evt.data 即是 postMessage 中传递过来的数据! 结合上下文, 综合起来:
main.html

window.frames['myFrame'].contentWindow.postMessage({name: 'injser', age: 18}, 'http://other-demo.com:15100');

frame-sets.html

window.addEventListener('message', function(evt) {
console.log(evt.data);
}, false);

这两种跨域方式在iframe中验证都是可用的, 至于以前一些可用的方案,比如:location.hash、cross-fragment等, 在现代浏览器汇总基本验证已不可行。 因此并没有在这里做出讲解。
最后, 作为一名正在路上的前端er, 文章中难免有失误的地方。 如有发现, 欢迎勘误!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,529评论 5 475
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,015评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,409评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,385评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,387评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,466评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,880评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,528评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,727评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,528评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,602评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,302评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,873评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,890评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,132评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,777评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,310评论 2 342

推荐阅读更多精彩内容