JavaScript iframe

一、iframe 标签

1、定义及使用

iframe标签 用于定义内联框架，内联框架是在一个页面中嵌入另一个页面。如：

<iframe src="https://blog.csdn.net/guang_s"></iframe>

• 有很多网页看上去是一个网页，但实际上它其中可能镶嵌有其它网页，<iframe>标签就可以把其它网页无缝地嵌入在一个页面中。
• <iframe>主要用于那些多个网页的共有部分，如导航栏、广告栏等。

  2、常用属性

   

  5️⃣：HTML5 中的新属性

 

3、sandbox 属性

sandbox 属性的值既可以是一个空字符串（将会启用所有的限制），也可以是用空格分隔的一系列指定的字符串。

HTML 5通过sandbox属性提升iFrame的安全性。sandbox属性可以防止不信任的Web页面执行某些操作。可以防止如下操作：

• 访问父页面的DOM（从技术角度来说，这是因为相对于父页面iframe已经成为不同的源了）
• 执行脚本
• 通过脚本嵌入自己的表单或是操纵表单
• 对cookie、本地存储或本地SQL数据库的读写

  二、IFrame 对象

   

  1、定义

   

  IFrame 对象代表一个 HTML 的内联框架。
  在 HTML 文档中 <iframe> 每出现一次，一个 IFrame 对象就会被创建。

2、IFrame 对象属性

3、IFrame 对象事件 

注：IFrame 对象同样支持标准的 属性 和 事件。

4、刷新 iframe

JavaScript 刷新 iframe ：

var iwindow =  document.getElementById('iframe').contentWindow;
iwindow.location.reload();

jQuery 刷新 iframe： 

$('#iframe').attr('src', $('#iframe').attr('src'));

 

三、父子窗口通信

1、获取 iframe 的内容

 

var iframe = document.getElementById('iframe');
iframe.onload =  function (){
    // 获取 iframe 的 document 对象（兼容IE）
    var idoc = iframe.contentWindow || iframe.contentDocument;
    if (idoc.document) idoc = idoc.document;
    
    var ititle = idoc.title; // 获取 iframe 文档的标题、
    var idom = idoc.getElementById('iframe_div'); // 获取 dom 对象
}

2、获取父窗口内容 

3、跨域

上述父子窗口通信受到同源策略的限制，在不同源的网页之间通信需要跨域。请参考：

【JavaScript编程】浏览器同源策略限制与规避（跨域）

四、iframe 应用

广告

        网页为了赚钱，引入广告是很正常的事了。通常的做法就是使用 iframe，引入广告地址就可以了，然后根据广告内容设置相应的显示框。但是，为什么是使用 iframe 来进行设置，而不是在某个div下嵌套就行了呢？

        要知道，广告是与原文无关的，这样硬编码进去，会造成网页布局的紊乱。而且，这样势必需要引入额外的css和js文件，极大的降低了网页的安全性。 这些所有的弊端，都可以使用 iframe 进行解决。

        我们通常可以将 iframe 理解为一个沙盒，里面的内容能够被 top window 完全控制，而且，主页的css样式是不会入侵 iframe 里面的样式，这些都给 iframe 的广告命运埋下伏笔。可以看一下各大站点是否都在某处放了些广告，以维持生计。比如：CSDN

五、iframe 安全性

iframe安全性有两个方面：一个是你的网页被别人iframe；一个是你iframe别人的网页。 当你的网页被别人iframe时，比如被钓鱼网站利用：

• iframe 享有着click的最优先权，当有人在伪造的主页中进行点击的话，如果点在iframe上，则会默认是在操作iframe的页面。（最出名的clickhacking就是使用iframe来拦截click事件）
• 钓鱼网站就是使用这个技术，来诱导用户进行点击。比如，设计一个"妹妹xxx"等之类的网页，诱导用户点击，但实际结果，你看到的不是"妹妹"，而是被恶意微博吸粉。

如何防止网页被iframe：

1、浏览器端

1）防止你的网页被 iframe，即不能嵌套在任意网页内：

if(window != window.top){
    window.top.location.href = correctURL;
}

2）只允许同源网页嵌入

try{
　　if (top.location.hostname != window.location.hostname) { 
　　　　top.location.href = window.location.href;
　　}
}
catch(e){
　　top.location.href = window.location.href;
}

 

2、服务器端

1）X-Frame-Options：是一个响应头，主要是描述服务器的网页资源的iframe权限。值：

 

• DENY：当前页面不能被嵌套在 iframe 里，也不允许网页中嵌套 iframe。（即便是在相同域名）
• SAMEORIGIN：iframe 页面的地址只能为同源的页面。
• ALLOW-FROM：可以在指定的 origin url 的 iframe 中加载。

 2）Content Security Policy：是一个响应头，能够极大的防止你的页面被XSS攻击，而且可以制定 js | css | img 等相关资源的 origin，防止被恶意注入。值：

• default-src：如 default-src ‘self’，表示只能从同域下加载。
• script-src
• style-src
• img-src
• connect-src
• font-src
• object-src
• media-src
• sandbox
• child-src

六、iframe 优缺点

优点

缺点

• iframe 会阻塞主页面的 onload 事件；
• 搜索引擎的检索程序无法解读这种页面，不利于SEO;
• iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

如果需要使用iframe，最好是通过 javascript 给 iframe 动态添加 src 属性值，这样可以绕开以上问题。