深入浅出谈 iframe

HTML内联框架元素 <iframe> 表示 嵌套的 browsing context。它能够将另一个HTML页面嵌入到当前页面中。

1、定义与用法

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

HTML 与 XHTML 之间的差异

在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素

提醒和注释

把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器

2、属性及其值

2.1、HTML5 中的新属性

属性	值	描述
align	leftrighttopmiddlebottom	不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。
frameborder	10	规定是否显示框架周围的边框。
height	pixels*%*	规定 iframe 的高度。
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight	pixels	定义 iframe 的顶部和底部的边距。
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。
name	frame_name	规定 iframe 的名称。
sandbox	""allow-formsallow-same-originallow-scriptsallow-top-navigation	启用一系列对 中内容的额外限制。
scrolling	yesnoauto	规定是否在 iframe 中显示滚动条。
seamless	seamless	规定 看上去像是包含文档的一部分。
src	URL	规定在 iframe 中显示的文档的 URL。
srcdoc	HTML_code	规定在 中显示的页面的 HTML 内容。
width	pixels*%*	定义 iframe 的宽度。

2.2、全局属性

支持HTML所有的全局属性

事件属性	描述
accesskey	规定激活元素的快捷键。
class	规定元素的一个或多个类名（引用样式表中的类）。
contenteditable	规定元素内容是否可编辑。
contextmenu	规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-*	用于存储页面或应用程序的私有定制数据。
dir	规定元素中内容的文本方向。
draggable	规定元素是否可拖动。
dropzone	规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden	规定元素仍未或不再相关。
id	规定元素的唯一 id。
lang	规定元素内容的语言。
spellcheck	规定是否对元素进行拼写和语法检查。
style	规定元素的行内 CSS 样式。
tabindex	规定元素的 tab 键次序。
title	规定有关元素的额外信息。
translate	规定是否应该翻译元素内容。

2.3、事件属性

支持HTML中所有的事件属性

2.3.1、针对 window 对象触发的事件（应用到 body标签）

属性	值	描述
onafterprint	script	文档打印之后运行的脚本。
onbeforeprint	script	文档打印之前运行的脚本。
onbeforeunload	script	文档卸载之前运行的脚本。
onerror	script	在错误发生时运行的脚本。
onhaschange	script	当文档已改变时运行的脚本。
onload	script	页面结束加载之后触发。
onmessage	script	在消息被触发时运行的脚本。
onoffline	script	当文档离线时运行的脚本。
ononline	script	当文档上线时运行的脚本。
onpagehide	script	当窗口隐藏时运行的脚本。
onpageshow	script	当窗口成为可见时运行的脚本。
onpopstate	script	当窗口历史记录改变时运行的脚本。
onredo	script	当文档执行撤销（redo）时运行的脚本。
onresize	script	当浏览器窗口被调整大小时触发。
onstorage	script	在 Web Storage 区域更新后运行的脚本。
onundo	script	在文档执行 undo 时运行的脚本。
onunload	script	一旦页面已下载时触发（或者浏览器窗口已被关闭）。

2.3.2、Form 事件

由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：

属性	值	描述
onblur	script	元素失去焦点时运行的脚本。
onchange	script	在元素值被改变时运行的脚本。
oncontextmenu	script	当上下文菜单被触发时运行的脚本。
onfocus	script	当元素获得焦点时运行的脚本。
onformchange	script	在表单改变时运行的脚本。
onforminput	script	当表单获得用户输入时运行的脚本。
oninput	script	当元素获得用户输入时运行的脚本。
oninvalid	script	当元素无效时运行的脚本。
onreset	script	当表单中的重置按钮被点击时触发。HTML5 中不支持。
onselect	script	在元素中文本被选中后触发。
onsubmit	script	在提交表单时触发。

2.3.4、Keyboard 事件

属性	值	描述
onkeydown	script	在用户按下按键时触发。
onkeypress	script	在用户敲击按钮时触发。
onkeyup	script	当用户释放按键时触发。

2.3.5、Mouse 事件

由鼠标或类似用户动作触发的事件：

属性	值	描述
onclick	script	元素上发生鼠标点击时触发。
ondblclick	script	元素上发生鼠标双击时触发。
ondrag	script	元素被拖动时运行的脚本。
ondragend	script	在拖动操作末端运行的脚本。
ondragenter	script	当元素元素已被拖动到有效拖放区域时运行的脚本。
ondragleave	script	当元素离开有效拖放目标时运行的脚本。
ondragover	script	当元素在有效拖放目标上正在被拖动时运行的脚本。
ondragstart	script	在拖动操作开端运行的脚本。
ondrop	script	当被拖元素正在被拖放时运行的脚本。
onmousedown	script	当元素上按下鼠标按钮时触发。
onmousemove	script	当鼠标指针移动到元素上时触发。
onmouseout	script	当鼠标指针移出元素时触发。
onmouseover	script	当鼠标指针移动到元素上时触发。
onmouseup	script	当在元素上释放鼠标按钮时触发。
onmousewheel	script	当鼠标滚轮正在被滚动时运行的脚本。
onscroll	script	当元素滚动条被滚动时运行的脚本。

2.3.6、Media 事件

由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 、、、 以及 ）:

属性	值	描述
onabort	script	在退出时运行的脚本。
oncanplay	script	当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
oncanplaythrough	script	当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchange	script	当媒介长度改变时运行的脚本。
onemptied	script	当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。
onended	script	当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
onerror	script	当在文件加载期间发生错误时运行的脚本。
onloadeddata	script	当媒介数据已加载时运行的脚本。
onloadedmetadata	script	当元数据（比如分辨率和时长）被加载时运行的脚本。
onloadstart	script	在文件开始加载且未实际加载任何数据前运行的脚本。
onpause	script	当媒介被用户或程序暂停时运行的脚本。
onplay	script	当媒介已就绪可以开始播放时运行的脚本。
onplaying	script	当媒介已开始播放时运行的脚本。
onprogress	script	当浏览器正在获取媒介数据时运行的脚本。
onratechange	script	每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。
onreadystatechange	script	每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。
onseeked	script	当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。
onseeking	script	当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。
onstalled	script	在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspend	script	在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdate	script	当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
onvolumechange	script	每当音量改变时（包括将音量设置为静音）时运行的脚本。
onwaiting	script	当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本

3、案例分析

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>iframe的使用</title>
    </head>
    <body>
        <iframe src="https://www.baidu.com" style="width:1000px;height: 500px;" name="baidu" scrolling="auto" sandbox="allow-same-origin">
        </iframe>
    </body>
</html>

可以看出，iframe的一些基本属性：

• src iframe页面地址，有同域跨域之分
• height iframe高度
• width iframe宽度
• name iframe命名，可通过window.frames[xxx]被调用
• scrolling iframe滚动模式
• sandbox html5新特性，用于限制iframe的功能

4、使用iframe的正确方法

我们可以通过 contentWindow 和contentDocument两个API获取iframe的window对象和document对象。

let iframe = document.getElementById('demo');
let iwindow = iframe.contentWindow; // 获取iframe的window对象
let idoc = iframe.contentDocument; // 获取iframe的document对象

刚刚我们提到了iframe的name属性，我们也可以通过window.frames[iframeName]来调用iframe。

let iframe = window.frames['demo']

5、iframe使用父级内容正确方法

我们通过window.self，window.parent，window.top这三个属性分别获取自身window对象，父级window对象，顶级window对象。

iframe1.self === iframe1
iframe1.parent === iframe2
iframe2.parent === window
iframe1.top === window

6、同域/跨域

6.1、同域

js遵循同源策略，即同协议，同域名，同端口号。

同源策略 是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。实际上，这种策略只是一个规范，并不是强制要求，各大厂商的浏览器只是针对同源策略的一种实现。它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

6.2、跨域

指的是两个资源非同源。出于安全方面的考虑，页面中的JavaScript在请求非同源的资源时就会出 跨域问题，即跨域请求，这时，由于同源策略，我们的请求会被浏览器禁止。也就出现了 我们常说的 跨域 问题。

6.2.1、iframe跨域通讯之document.domain

对于主域相同子域不同的两个页面，我们可以通过document.domain + iframe来解决跨域通信问题。

网页A(http://www.easonwong.com)和网页B(http://script.easonwong.com)，两者都设置document.domain = 'easonwong.com'（这样浏览器就会认为它们处于同一个域下），然后网页a再创建iframe上网页b，就可以进行通信。

网页A

document.domain = 'easonwong.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.easonwong.com';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
    let doc = ifr.contentDocument || ifr.contentWindow.document;
    // 在这里操纵b.html
};

网页B

document.domain = 'easonwong.com';

6.2.2、iframe跨域通讯之postMessage

postMessage是html5的新特性

我们可以通过html5这个新特性进行iframe间的跨域通信，使用postMessage进行数据传递，通过Message监听通信事件。

网页a

document.domain = 'easonwong.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.easonwong.com';
ifr.style.display = 'none';
document.body.appendChild(ifr);
// 发送数据
ifr.postmessage('hello, I`m a', 'http://script.easonwong.com');

网页b

// 监听message事件
window.addEventListener('message', receiver, false);
function receiver(e) {
    if (e.origin == 'http://www.easonwong.com') {
        if (e.data == 'hello, I`m a') {
            e.source.postMessage('hello, I`m b', e.origin);信息
        }
    }
}

7、iframe实现JSBridge

在移动端Hybrid混合模式中经常用到JSBridge进行JS和Native之间的通信，其中我们可以通过iframe的方式实现JS调用Native的方法。

以上提到的方法就是URL SCHEME拦截。

URL SCHEME是一种类似于url的链接，是为了方便app直接互相调用设计的，形式和普通的 url 近似，主要区别是 protocol 和 host 一般是自定义的，例如: easonwong://hh/url?name=easonwong，其中protocol是easonwong，host则是hh。

我们通过创建一个iframe（src设为我们自定义的URL SCHEME）来发送请求，然后Native那边可以拦截到请求并获取其中带有的参数，即可进行后续的操作。

8、iframe的其他用途

• 用iframe进行异步请求：在很久很久很久以前，久到ajax还没出现的时候，人们会用iframe来进行异步请求。大概就是异步创建iframe，然后后台返回数据在iframe中，我们在从里面获取数据。例如在我做过的一个项目中，通过iframe.src传入一个文件下载地址，实现无需打开新窗口下载文件。

• 引用/展示第三方内容

• 需要独立样式和带有交互的内容，例如幻灯片

• sandbox沙箱隔离

• 历史记录管理

9、iframe的安全问题

9.1、iframe小广告

很让我们讨厌iframe的一点，就是很多*网站都会有各种让人防不胜防的小广告，它们大多就是用通过iframe实现的，本来想点击某个播放按钮，结果马鸭直接跳几十跳不知道去了哪个新世界去了。

更讨厌的一种情况是，可能不知道哪天用户突然拿刀过来，说我们的项目页面里出现了野鸡广告，说我们在消费他们，一脸懵逼的我们觉得十分无辜。实际上就是我们的页面被运行商劫持了，被挂上了注入了不知名的野鸡广告。

所以我们一定要注意在用iframe的同时，要防止我们被iframe了。

9.2、防嵌套页面操作

在前端领域，我们可以通过window.top来防止我们页面被嵌套。

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

或者通过window.location.host来检测是否跨域了

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

而后端也可以做对应的防范措施，通过设置X-Frame-Options响应头来确保自己网站的内容没有被嵌到别人的网站中去，也从而避免了点击劫持 (clickjacking) 的攻击。

9.3、CSP

内容安全策略（CSP）用于检测和减轻用于 Web 站点的特定类型的攻击，例如 XSS 和数据注入等。

MDN CSP

通过CSP配置sandbox和child-src可以设置iframe的有效地址，它限制适iframe的行为，包括阻止弹出窗口,防止插件和脚本的执行,而且可以执行一个同源策略。

用法

• 我们可以在html头部中加上 <meta> 标签

    <meta http-equiv="Content-Security-Policy" content="child-src 'unsafe-inline' 'unsafe-eval' www.easonwong.com">

• 或者通过HTTP头部信息加上Content-Security-Policy字段