iframe使用

iframe的常用属性

属性	说明
name	规定 frame 的名称
width	设置 frame 的宽度
height	设置 frame 的高度
src	设置在 frame 中显示的页面
frameborder	是否显示 frame 的边框（0：不显示边框 1：显示边框）
scrolling	是否显示 frame 中的滚动条（ yes | no | auto ）

iframe 的常见使用方式

一、获取 window 对象

在页面中嵌入 iframe 子页面如下：

<iframe name="iframeName" id="iframeId" src="./test.html"></iframe>

父页面获取子页面的window对象

1、通过获取 iframe 元素进而通过 contentWindow 属性获取 iframe 中的 window 对象

var iframe = document.getElementById("iframeId"); //获取iframe标签
var iframeContent = iframe.contentWindow; //获取iframe的window对象
var idoc = iframeContent.document; //获取iframe的document对象

2、结合iframe中的 name 属性，通过window提供的 frames 获取

// 打印iframe中页面的window对象
console.log(window.frames['iframeName'].window);	

子页面获取父页面的window对象

同理，父页面可以获取子页面的内容，那么子页面也同样能获取父页面内容。在iframe中，可以通过在window上挂载的几个API进行获取.

// 获取上一级的 window 对象，如果还是iframe则是该iframe的window对象
console.log(window.parent)
// 获取最顶级容器的 window 对象，即，就是你打开页面的文档
console.log(window.top)
// 返回自身 window 的引用。
console.log(window.self)

在同源的情况下，父页面和子页面都可以互相获取到对方的 window 对象；
不同源的情况下，即使可以互相获取到对方的 window 对象，也无法对其进行操作，例如触发事件iframe.contentWindow.dispatchEvent(new Event('keyup'))

二、父子页面之间的传值方式

在页面中嵌入 iframe 子页面如下：

<iframe name="iframeName" id="iframeId" src="./test.html"></iframe>

通过 postMessage 进行通信

window.postMessage() 方法可以安全地实现跨源通信。它提供了一种受控机制来进行iframe跨域页面之间的数据通信，只要正确的使用，这种方法就很安全。

语法：

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow：其他窗口的一个引用，比如iframe的contentWindow属性

message：将要发送到其他 window 的数据。

targetOrigin：通过窗口的 origin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）

transfer：是一串和 message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

1、父页面向子页面传值：

父页面：

function postData() {
  // 获取 iframe 元素
  var id = document.getElementById('iframeId');
  // 发送数据，触发子页面的 postMessage 监听事件
  id.contentWindow.postMessage('我是父元素传给子元素的数据哦！', '*');
}
// 父页面接受子页面的数据
window.addEventListener('message', (e) => {
  console.log(e)
}, false);

子页面：

// 注册 message 消息事件监听，接受数据
window.addEventListener('message', (e) => {
  console.log(e)
  // 接受到数据后，子页面可以向父页面发送数据，告诉父页面已收到消息
  e.source.postMessage("确认收到消息", "*");
}, false);

2、子页面向父页面传值

子页面：

function handleEvent() {
  // 发送数据，触发父页面的监听事件
  window.postMessage('我是子元素传给父元素的数据哦！', '*');
}

父页面：

// 注册消息事件监听，接受子元素给的数据
window.addEventListener('message', (e) => {
	console.log(e)
}, false);

跨域事件传递用例

在实际开发中使用 iframe 时，子页面绑定的事件经常需要通过父页面的某种操作（例如按下键盘）触发。下面演示如何触发：

父页面：

// 用户按下键盘事件
function keyupHandle(e) {
	// 将用户按下的键值传给子页面
	document.getElementById('iframeId').postMessage({keyCode: e.keyCode}, '*')
}

子页面：

// 注册消息事件监听，接受数据
window.addEventListener('message', (e) => {
	switch(e.data.keyCode) {
		case 13:
			// to do...
		...
		default: return 
	}
}, false)

通过本地存储进行通信

父页面将数据存储在本地 localStorage，然后子页面在本地 localStorage 获取数据

通过 url 进行通信

实现的技巧是利用 location 对象的 hash 值，通过它传递通信数据。在父页面设置 iframe 的 src 后面多加个 data 字符串，然后在子页面中通过某种方式能即时的获取到这儿的 data 就可以了，例如：

1、在子页面中通过 setInterval 方法设置定时器，监听 location.href 的变化即可获得上面的 data 信息，然后子页面根据这个 data 信息进行相应的逻辑处理

2、在vue中还可以使用 watch 监听属性，监听路由 $route 的变化来进行相应的逻辑处理

三种通信方式都可以在不同域的情况下使用