1. iframe定义

    2. 什么是同源策略

    3. 父子及多层间互取元素

    4. 父子及多层间元素修改

iframe定义

name：可以用作<a>标签，<form>标签的target属性值，或<input> 标签和 <button>标签的formtaget属性，点击a标签后，会把href的网址引入到iframe。

srcdoc：该属性值可以是HTML代码，最好能与sandbox一起使用。

sandbox：通过不同属性定义为iframe增加限制条件，多个条件用空格分开。

1. allow-forms: 允许iframe内容可以提交表单。

2. allow-modals: 允许iframe内容打开模态窗口。

3. allow-orientation-lock: 允许iframe内容禁用屏幕朝向锁定。

4. allow-pointer-lock: 允许iframe内容使用鼠标锁定API.

5. allow-popups: 允许打开新窗口 (类似window.open, target="_blank", showModalDialog)。

6. allow-popups-to-escape-sandbox: 允许打开新窗口，新页面不强制受到沙箱相关限制。

7. allow-presentation: 是否iframe启用一个展示会话。

8. allow-same-origin: 将内容作为同源对待。如果未使用该关键字，嵌入的内容将被视为一个独立的源。

9. allow-scripts: 允许嵌入的iframe运行脚本，否则不能运行。

10. allow-top-navigation:允许嵌入的页面的上下文可以导航（加载）内容到顶级的浏览上下文环境（browsing context）。

同源策略

同源策略即SOP，是万维网的核心安全机制，通过比较URL中的主机名（主域名）、协议及端口，来判断是否是同源，三者全部相同则视为同一个来源，有一个不同即为不同来源的资源。

这里有一点需要注意，主域名相同的情况下，子域名不同也是跨域的。

父子之间互取元素（同域）

tip:elemframe，elemframe1（第一次iframe），elemframe2（和1并列的iframe），elemframe3（嵌套在1中的iframe）皆为iframe 的名字和id。elem1js(1~3)为不同子页面名称,testfun1(),testfun3()为不同子页面的函数。

父页面获取子页面元素

子页面获取父页面元素

父页面监听子页面元素事件

子页面监听父页面元素事件

父页获取子页面js变量及函数

子页面获取父页面js变量及函数

父页获取子页面cookie

子页面获取父页面及并列页面cookie

第二层子页面相关操作

Demo地址：http://works.enjoyfe.com/iframe/parent_def.html

安全&前端

长按二维码
关注我们