iframe相关知识点总结

iframe 父级页面与子级页面通信

1.（使用获取ID 调用contentWindow获取）

1.在父页面调用子页面的方法  

注意：如果是初始化页面调用子页面的方法 那么子页面的方法不可以写在window.onload 里面；
document.getElementById('iframe_content').contentWindow.getalert()

2. 在父页面中获取子页面的元素

document.getElementById('iframe_content').contentWindow.document.getElementById('box-1')

2.直接使用iframe的name 调用子页面的window对象
1.在父页面调用子页面的方法

iframeName.window.getalert();

2.在父页面获取子页面的元素
iframeName.window.document.getElementById('box-1')

3.通过window对象的frames[]数组对象直接获取子frame对象

window.frames[0].getalert();
window.frames[0].document.getElementById('box-1')

子页面与父页面的通信

通过top或者parent 对象 获取父页面的window对象的元素和方法

top.window.getalert();
parent.window.getalert()

页面内兄弟iframe页面获取的方法同获取单个iframe

使用 iframe + postMessage 实现跨域通信

1.父页面的数据传递到子页面的
	data: 表示数据 targetOrigin iframe的源
	document.getElementById('iframe_content').contentWindow.postMessage(data,targetOrigin)
	子页面接受data 数据
	window.addEventListener('message',({data})=>{console.log(data)})
	
2.子页面向父页面传递数据

	子页面 top.postMessage(data)
	父页面 window.addEventListtener('message',({data})=>console.log(data))

iframe 实现子页面与父页面自适应
在iframe页面加上这段代码 页面加载完成后设置iframe的高度
οnlοad=“this.height=iframeName.document.body.scrollHeight”

iframe 标签属性

	name ：iframe的名字；在获取iframe使用
	scrolling: 是否在iframe里面显示滚动条 设置no 显示不全iframe 滑动不了页面
	src : 引用html 地址
	srcdoc :引用一段代码片段
	frameborder: 设置边框 0 || 1
	height/width

iframe 优点：
解决跨域请求其他网站；
复用代码；
可以实现子页面刷新。不影响全局页面；

	缺点：
	不利于seo优化，页面阻塞，影响加载速度