iframe通信 frame和iframe的区别
大家好，关于iframe通信很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于frame和iframe的区别的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！
js 简单使用postMessage iframe跨域通信
postMessage是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案.
要发送到其他窗口的数据,它将会被!结构化克隆算法序列化.这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化.
通过窗口的origin属性来指定哪些窗口能接收到消息事件,指定后只有对应origin下的窗口才可以接收到消息,设置为通配符"*"表示可以发送到任何窗口,但通常处于安全性考虑不建议这么做.如果想要发送到与当前窗口同源的窗口,可设置为"/"
是一串和message同时传递的 Transferable对象,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权.
下面是打印出的结果 data属性为传输过来的数据
若用到的地方很多建议加上 targetOrigin属性并且给数据加好type确保数据正确的被接收
欢迎对这个有研究、有兴趣或者发现文章有错误的地方的伙伴们和我交流,共同进步~~~
详解iframe跨域的几种常用方法(小结)
背景
随着业务的发展，自然地会有一些公共的业务被抽离成为公共组件共各个项目使用。但是由于各个项目用到的技术栈都有所不同，所以这个公共组件就不能方便地被引用了。为解决这个问题，我们把这个组件写成了单独的页面挂到一个域名下，其他项目采用iframe或者webview的方式去加载这个页面，从而实现功能的简单复用。
不过这过程中也产生了很多问题，单是跨域就会出现好几次了。以下我将会介绍我遇到的跨域问题以及一些解决方法。
为什么会跨域
为了保证用户信息的安全，95年的时候Netscape公司引进了同源策略，里面的同源指的是三个相同：协议、域名、端口。
违反了同源策略就会出现跨域问题，主要表现为以下三方面：
无法读取cookie、localStorage、indexDB
DOM无法获得
ajax请求无法发送
场景
最近在做一个需求，需要用iframe引入一个别人封装好的类似视频播放器的东西。iframe里面有一个全屏的按钮，点击后需要页面让iframe全屏，由于受到同源策略的限制，iframe无法告诉页面全屏。
解决办法
设置domain
document.domain作用是获取/设置当前文档的原始域部分，同源策略会判断两个文档的原始域是否相同来判断是否跨域。这意味着只要把这个值设置成一样就可以解决跨域问题了。
在此我将domain设置为一级域名的值，a页面url为a.demo.com，a页面中iframe引用的b页面url为b.demo.com，具体设置为
document.domain='demo.com'
设置完之后，在a页面的window上挂载使iframe全屏的方法
// a页面
window.toggleFullScreen=()=>{
// do something
}
在b页面上可以直接获取到a页面的window对象并直接调用
// b页面
window.parent.toggleFullScreen()
但是这个值的设置也有一定限制，只能设置为当前文档的上一级域或者是跟该文档的URL的domain一致的值。如url为a.demo.com，那domain就只能设置为demo.com或者a.demo.com。因此，设置domain的方法只能用于解决主域相同而子域不同的情况。
使用中间页面
我们还可以使用一个与a页面同域名但不同路由的c页面作为中间页面，b页面加载c页面，c页面调用a页面的方法，从而实现b页面调用a页面的方法。具体操作如下：
在a页面的node层新开一个路由，此路由加载一个c页面作为中间页面，c页面的url为a.demo.com/c。c页面只是一个简单的html页面，在window的onload事件上调用了a页面的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
window.onload= function(){
parent.parent.toggleFullScreen();
}
</script>
</body>
</html>
由于c页面和a页面是符合同源策略的，所以可以避开跨域问题，执行全屏的方法。
postmessage
window.postMessage方法可以安全地实现跨源通信，写明目标窗口的协议、主机地址或端口就可以发信息给它。
// b页面
parent.postMessage(
value,
""
);
// a页面
window.addEventListener("message", function( event){
if(event.origin!=='') return;
toggleFullScreen()
});
为了安全，收到信息后要检测下event.origin判断是否要收信息的窗口发过来的。
通过以上的方法，我们就可以和iframe自由通信啦。
解决iframe postMessage跨域通信中的Origin不匹配错误
解决iframe postMessage跨域通信中Origin不匹配错误的核心方法是等待iframe完全加载后再发送消息，通过监听load事件确保contentWindow的源已正确初始化。
错误原因分析时序问题：当父页面在iframe内容加载完成前调用postMessage时，iframe的contentWindow可能仍指向初始的about:blank文档，导致targetOrigin与实际源不匹配。React生命周期影响：在React中，useEffect或componentDidMount可能在iframe加载完成前触发，直接调用postMessage会引发错误。解决方案1.监听iframe的load事件通过onLoad回调确保iframe完全加载后再发送消息，关键步骤如下：
使用useRef获取iframe引用：避免直接通过DOM查询，确保引用稳定。定义消息发送函数：在函数中检查contentWindow可用性，安全执行postMessage。绑定onLoad事件：在iframe标签中设置onLoad，触发后调用消息发送函数。示例代码（React）：
import React,{ useRef} from'react';function ParentApp(){ const iframeUrl=";; const iframeRef= useRef(null); const message={ data:"Hello from Parent!"}; const sendMessageToIframe=()=>{ if(iframeRef.current?.contentWindow){ iframeRef.current.contentWindow.postMessage(message, iframeUrl);}}; return(<div><iframe ref={iframeRef} src={iframeUrl} onLoad={sendMessageToIframe}//加载完成后触发 style={{ width:'100%', height:'400px', border:'none'}}/></div>);}2.处理动态数据与加载状态若需在数据变化时发送消息，需结合iframeLoaded状态和useEffect依赖项：
状态管理：使用useState跟踪iframe加载状态。依赖项控制：仅在iframeLoaded为true且数据变化时发送消息。进阶示例：
import React,{ useRef, useState, useEffect} from'react';function ParentAppAdvanced(){ const [data, setData]= useState({ info:"Initial Data"}); const [iframeLoaded, setIframeLoaded]= useState(false); const iframeUrl=";; const iframeRef= useRef(null); useEffect(()=>{ if(iframeLoaded&& iframeRef.current?.contentWindow){ iframeRef.current.contentWindow.postMessage(data, iframeUrl);}}, [data, iframeLoaded]);//依赖数据和加载状态 const handleIframeLoad=()=>{ setIframeLoaded(true);}; return(<div><button onClick={()=> setData({ info: `Updated:${Date.now()}`})}>更新数据</button><iframe ref={iframeRef} src={iframeUrl} onLoad={handleIframeLoad} style={{ width:'100%', height:'400px', border:'none'}}/></div>);}注意事项与最佳实践targetOrigin安全性：始终指定精确的源（如），避免使用*以防止信息泄露。双向通信：子页面需通过window.addEventListener('message', callback)监听父页面消息，并验证event.origin。错误处理：添加超时机制（如setTimeout）处理加载失败。
在控制台记录未加载时的警告（如console.warn("iframe未加载")）。
React优化：若数据频繁更新，可使用防抖（debounce）减少不必要的消息发送。总结Origin不匹配错误的根本原因是iframe加载时序问题，解决方案需围绕load事件展开：
监听onLoad：确保contentWindow源正确后再发送消息。状态管理：结合iframeLoaded状态处理动态数据。安全实践：严格指定targetOrigin，实现健壮的跨域通信。通过以上方法，可有效避免Origin错误，建立可靠的父子页面通信机制。
好了，关于iframe通信和frame和iframe的区别的问题到这里结束啦，希望可以解决您的问题哈！