iframe使用

文章目录

• iframe的常用属性
• iframe 的常见使用方式
• • 一、获取 window 对象
  • • 父页面获取子页面的window对象
    • 子页面获取父页面的window对象
  • 二、父子页面之间的传值方式
  • • 通过 postMessage 进行通信
    • • 跨域事件传递用例
    • 通过本地存储进行通信
    • 通过 url 进行通信

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 的变化来进行相应的逻辑处理

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

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦