iframe的方方面面

浏览器中的浏览器

iframe 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级。使用 iframe 的页面一般不会包含太多 iframe,所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题:onload 事件以及连接池(connection pool)。

皓眸大前端开发学习

iframe用法

关于详细的用法,可以参考w3school iframe
下面给出一个常用的无边框的iframe的例子:

1
<iframe src=”you page’s url” width=”100″ height=”30″ frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes”></iframe>

Iframes阻塞页面加载

及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止,告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后,它给用户的感觉就是这个网页非常慢。

window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里,通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况。

###唯一的连接池

浏览器只能开少量的连接到web服务器。比较老的浏览器,包含 Internet Explorer 6 & 7 和 Firefox 2,只能对一个域名(hostname)同时打开两个连接。这个数量的限制在新版本的浏览器中有所提高。Safari 3+ 和 Opera 9+ 可同时对一个域名打开 4 个连接,Chrome 1+, IE 8 以及 Firefox 3 可以同时打开 6 个。你可以通过这篇文章查看具体的数据表:Roundup on Parallel Connections.

有人可能希望 iframe 会有自己独立的连接池,但不是这样的。绝大部分浏览器,主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接,从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要,这当然是很好的。但通常情况下,iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。一种解决办法是,在主页面上重要的元素加载完毕后,再动态设置 iframe 的 SRC。

美国前 10 大网站都使用了 iframe。大部分情况下,他们用它来加载广告。这是可以理解的,也是一种符合逻辑的解决方案,用一种简单的办法来加载广告服务。但请记住,iframe 会给你的页面性能带来冲击。只要可能,不要使用 iframe。当确实需要时,谨慎的使用他们。

巧妙用法

iframe原本的用法在现在看来是不合时宜的,但是它的其他功能却是不错的黑魔法:
1.用来实现长连接,在websocket不可用的时候作为一种替代,最开始由google发明。Comet:基于 HTTP 长连接的“服务器推”技术
2.跨域通信,JavaScript跨域请求的方方面面 ,类似的还有浏览器多页面通信,比如音乐播放器,用户如果打开了多个tab页,应该只有一个在播放。
3.历史记录管理,解决ajax化网站响应浏览器前进后退按钮的方案,在html5的history api不可用时作为一种替代。
4.纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串,可以通过页面加载一个gbk的iframe,然后主页面与子页面通信的方式实现转换,这样就不用在页面上插入一个非常巨大的编码映射表文件了,其中子页面内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html>
<head>
<meta charset="gbk">
<script>
window.encoding = function(str){
//利用a元素的href属性来encode
var a = document.createElement("a");
a.href = "/?q=" + str;
var url = a.href; //这里读取的时候会自动编码
a.href = "/?q=";
return url.replace(a.href, "");
};
</script>
</head>
</html>

把这个iframe部署到父页面的同源服务上,就能在父页面直接调用iframe中的encoding接口了。
5.用iframe实现无刷新文件上传,在FormData不可用时作为替代方案。
6.在移动端用于从网页调起客户端应用(此方法在iphone上并不安全,慎用!具体风险看这里 iOS URL Scheme 劫持 )。比如想在网页中调起支付宝,我们可以创建一个iframe,src为:

1
alipayqr://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode={支付二维码扫描的url}

浏览器接收到这个url请求发现未知协议,会交给系统处理,系统就能调起支付宝客户端了。我们还能趁机检查一下用户是否安装客户端:给iframe设置一个3-5秒的css3的transition过渡动画,然后监听动画完成事件,如果用户安装了客户端,那么系统会调起,并将浏览器转入后台运行,进入后台的浏览器一般不会再执行css动画,这样,我们就能通过判断css动画执行的时长是否超过预设来判断用户是否安装某个客户端了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/**
* 调起客户端
* @param url {String}
* @param onSuccess {Function}
* @param onFail {Function}
*/
module.exports = function(url, onSuccess, onFail){
// 记录起始时间
var last = Date.now();

// 创建一个iframe
var ifr = document.createElement('IFRAME');
ifr.src = url;
// 飘出屏幕外
ifr.style.position = 'absolute';
ifr.style.left = '-1000px';
ifr.style.top = '-1000px';
ifr.style.width = '1px';
ifr.style.height = '1px';
// 设置一个4秒的动画用于检查客户端是否被调起
ifr.style.webkitTransition = 'all 4s';
document.body.appendChild(ifr);
setTimeout(function(){
// 监听动画完成时间
ifr.addEventListener('webkitTransitionEnd', function(){
document.body.removeChild(ifr);
if(Date.now() - last < 6000){
// 如果动画执行时间在预设范围内,就认为没有调起客户端
if(typeof onFail === 'function'){
onFail();
}
} else if(typeof onSuccess === 'function') {
// 动画执行超过预设范围,认为调起成功
onSuccess();
}
}, false);
// 启动动画
ifr.style.left = '-10px';
}, 0);
};

  1. 创建一个全新的独立的宿主环境。经大神提醒,iframe还可以用于创建新的宿主环境,用于隔离或者访问原始接口及对象,比如有些前端安全的防范会覆盖一些原生的方法防止恶意调用,那我们就能通过创建一个iframe,然后从iframe中取回原始对象和方法来破解这种防范。类似的还有 @贺师俊 曾经提到的javascript裸对象创建中的一种方法:如何创建一个JavaScript裸对象 ,一般所见即所得编辑器也是由iframe创建的, @Dion 的回答有提到
  2. IE6下用于遮罩select。经 @yaniv 提醒想起来的。曾经在ie6时代,想搞一个模态窗口,如果窗口叠加在select元素上面,是遮不住select的,为了解决这个问题,可以通过在模态窗口元素下面垫一个iframe来实现遮罩,好坑爹的ie6,还我青春韶华~~

防止网页被Frame

防止网页被Frame,方法有很多种;

方法一:常见的比如使用js,判断顶层窗口跳转:

1
2
3
4
5
(function () {
if (window != window.top) {
window.top.location.replace(window.location); //或者干别的事情
}
})();

一般这样够用了,但是有一次发现失效了,看了一下人家网站就是顶层窗口中的代码,发现这段代码:

1
2
var location = document.location;
// 或者 var location = "";

轻轻松松被破解了,悲剧。

注:此方式破解对IE6,IE7,IE9+、Chrome、firefox无效;

方法二:meta 标签:基本没什么效果,所以也放弃了:

1
<meta http-equiv="Windows-Target" contect="_top">

方法三:使用HTTP 响应头信息中的 X-Frame-Options属性

使用 X-Frame-Options 有三个可选的值:

1
2
3
DENY:浏览器拒绝当前页面加载任何Frame页面
SAMEORIGIN:frame页面的地址只能为同源域名下的页面
ALLOW-FROM:origin为允许frame加载的页面地址

绝大部分浏览器支持:

1
2
Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support 4.1.249.1042 3.6.9 (1.9.2.9) 8.0 10.5 4.0

具体的设置方法:

Apache配置:

1
Header always append X-Frame-Options SAMEORIGIN

nginx配置:

1
add_header X-Frame-Options SAMEORIGIN;

IIS配置:

1
2
3
4
5
6
7
8
9
10
11
<system.webServer>
...

<httpProtocol>
<customHeaders>
<add name="X-Frame-Options" value="SAMEORIGIN" />
</customHeaders>
</httpProtocol>

...
</system.webServer>

具体可以查看:
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options?redirectlocale=en-US&redirectslug=The_X-FRAME-OPTIONS_response_header

谢谢!

转载请注明出处:http://www.haomou.net/2015/11/06/2015_frame/
有问题请留言。T_T 皓眸大前端开发学习 T_T