iframe必知必会

227 阅读1分钟

一、iframe简介

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)

iframe标签上的常见属性
height  // iframe高度
width // iframe宽度
src // 规定在iframe中显示的文档的URL

二、父子页面之间的交互

// 父页面 html
<iframe id="iframeId" src=""></iframe>
// 父页面 js
let iframeDom=document.getElementById("iframeId") // 在父页面获取子页面的dom元素
let iframeWindow=iframeDom.contentWindow // 子页面的window对象
window.addEventListener("message",function (e) {
        console.log(e.data); // "msg"。 接收来自子页面的参数msg
    })
// 子页面 js
let parent=window.parent // 父页面的window对象
let msg="msg"
parent.postMessage(msg,"*") // 将msg传给父页面