摘要 今天小编跟大家讲解下有关如何优雅的使用iframe ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关如何优雅的使用iframe

今天小编跟大家讲解下有关如何优雅的使用iframe ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关如何优雅的使用iframe 的相关资料，希望小伙伴们看了有所帮助。

iframe在web应用刀耕火种的开发年代是非常常见的 现在基于Node构建的前端应用嵌入iframe的场景越来越少了 但是在大型的web应用中也会经常遇见利用iframe嵌入多个前端应用于一套前端系统中 方便用户在一个系统中去进行业务操作 而不需要在几个不同的系统中来回切换 好了应用场景说了这么多 正式开始吧。

iframe可以理解为一个DOM里面插入了一个窗口级应用 iframe有自己独立的window iframe窗口自己内部的逻辑操作可以独立 当然在同域条件下 iframe窗口可以访问父级窗口 父级窗口也可以访问iframe窗口 跨域情况下只能通过Window.postMessage()通信的方式告诉对方自己想要的操作。

使用iframe只要能拿到父级给的参数 iframe内部就可以进行一系列操作 登录 鉴权等。那怎么获取到父级的参数就需要思考了。

大致以下几种：

1.通过iframe的URL参数携带参数信息。

此方法比较简单方便 也是比较常见的方法 主系统也不用做额外的开发 只需要在访问的时候 动态切换URL路径就行 此方法不管同域跨域都可以使用。

2.同域情况下 父子级直接相互操作即可 调用相应的方法即可。

调用函数:

父级页面调用子页面的函数name.window.func() name为iframe的name子页面调用父级页面的函数parent.window.func();访问页面元素name.window parent.window

window都能拿到 dom localstorage session等还拿不到吗

注意：保证iframe已经加载成功

3.跨域情况下就用Window.postMessage() 此方法一样要保证iframe加载成功

直接给个例子

父窗口发消息

setIframe(){ let data = 'test' // data尽量字符串 存在兼容性问题 若要传对象 将对象转化为字符串再传递 let hcfIframe:any = document.getElementById('hcfIframe') // iframe加载需要时间 递归发送消息 if(hcfIframe){ // contentWindow属性返回<iframe>元素的Window对象。你可以使用这个Window对象来访问iframe的文档及其内部DOM。contentWindow为只读 但是可以像操作全局Window对象一样操作其属性。 hcfIframe.contentWindow.postMessage(data,'http://localhost:8001/#/'); return }else{ setTimeout(() => { this.setIframe() },200) } }

iframe窗口接收消息

//回调函数function receiveMessageFromIframePage (event) { console.log('receiveMessageFromIframePage', event)}//监听message事件window.addEventListener("message", receiveMessageFromIframePage, false);

接收消息后你就可以进行相应的操作了。

来源：爱蒂网