iframe

描述

在当前文档中嵌入其他的网页。对于iframe的样式问题，可以像div等一样操作，只是margin:0 auto对于居中定宽的iframe似乎无效，需要包含在div中来实现居中。

重要属性

• name: 定义iframe的名字，该名称可以用作a或者form标签的target属性值。

• allow: 当定义allow="fullscreen"时，可以通过<iframe>的requestFullscreen()方法激活该内联框架的全屏模式。

• height/width: 定义内联框架的宽高。

• src: 定义被嵌套的页面的url地址。

• frameborder: 内网框架是否显示边框。“1”显示，“0”不显示。

  • 此属性不赞成使用，推荐使用CSS的border代替。

• scrolling: 这个属性控制是否要在框架内显示滚动条，允许的值包括：

  • auto:仅当框架的内容超出框架的范围时显示滚动条。
  • yes: 始终显示滚动条。
  • no: 从不显示滚动条。

获取iframe

1. 像获取普通的dom元素一样，通过标签名、id、class等获取。
2. 通过window.frames获取整个文档中的"iframe"的伪数组。

父子页面通信方式一

父访问子： 脚本可以通过contentWindow访问内联框架的window对象。

frames[0].contentWindow.document.getElementById("innerDiv").style.backgroundColor="blue";
// 设置第一个iframe内联页面的“innerDiv”的背景颜色。

子访问父： window.parent访问父级窗口；window.top访问顶层父窗口。

window.parent.document.getElementById("outerDiv").style.backgroundColor="red";
// 设置父窗口文档的"outerDiv"的背景颜色

父子页面通信方式二

核心： window.postmessage()在页面之间传递消息。

frames[0].contentWindow.postMessage("data","传给子页面的数据"); // 给子页面发送数据

window.addEventListener('message',function(event){
    console.log("子页面获取父页面传入的数据：",event.data);
});
//子页面结束数据

备注：

两种通信方式都不能跨域。

“同源”策略规定：

• 如果我们有对另外一个窗口（例如，一个使用 window.open 创建的弹窗，或者一个窗口中的 iframe）的引用，并且该窗口是同源的，那么我们就具有对该窗口的全部访问权限。
• 否则，如果该窗口不是同源的，那么我们就无法访问该窗口中的内容：变量，文档，任何东西。唯一的例外是 location：我们可以修改它（进而重定向用户）。但是我们无法读取 location（因此，我们无法看到用户当前所处的位置，也就不会泄漏任何信息）。

详情参阅：跨窗口通信