编程网站入门,如何做网站里的子网站,网站制作 成功案例,网站建设捌金手指花总二八demo在文章末尾。
window.postMessage
1、有什么用#xff1f;
答#xff1a;可以安全地实现跨源通信。通常#xff0c;对于两个不同页面的脚本#xff0c;只有当执行它们的页面同源时#xff0c;这两个脚本才能相互通信。 window.postMessage() 方法提供了一种受控机…demo在文章末尾。
window.postMessage
1、有什么用
答可以安全地实现跨源通信。通常对于两个不同页面的脚本只有当执行它们的页面同源时这两个脚本才能相互通信。 window.postMessage() 方法提供了一种受控机制来规避此限制只要正确的使用这种方法就很安全。
2、两个页面如何算同源
答在JavaScript中同源Same-Origin是指两个页面的协议、域名和端口都相同。这是浏览器安全策略的一部分用于限制不同源之间的交互以防止潜在的安全风险。同源策略Same-Origin Policy是浏览器的一种安全机制它要求浏览器只允许脚本访问与其自身源相同的资源。这意味着如果一个JavaScript脚本在一个域名下运行那么它只能访问该域名下的资源不能访问其他域名下的资源除非这两个域名之间有明确的跨域资源共享CORS设置。
具体来说两个页面同源需要满足以下条件
协议相同例如两个页面都使用http://或https://。 域名相同例如两个页面都是example.com或子域名如sub.example.com。 端口相同如果两个页面使用不同的端口号则它们不是同源的。默认情况下http://的端口是80https://的端口是443但如果明确指定了其他端口号则必须相同。 如果两个页面不满足上述条件中的任何一个它们就被认为是不同源的浏览器会阻止它们之间的一些交互行为例如
使用XMLHttpRequest或fetch发送跨域请求。在一个窗口中通过document.domain属性来访问另一个窗口的文档对象模型DOM。使用window.open、window.parent、window.top等窗口对象属性来访问或操作不同源的窗口。但是为了支持一些合理的跨域交互需求浏览器提供了跨域资源共享CORS等机制允许服务器明确指定哪些源可以访问其资源。此外postMessage方法是一个例外它允许不同源的窗口之间安全地传递消息只要正确地设置消息的来源和目标。
3、targetWindow.postMessage(message, targetOrigin, [transfer]); 语法说明
1targetWindow指的是什么 在JavaScript中targetWindow 是一个对另一个浏览器窗口或者iframe的引用。当你想要从一个窗口向另一个窗口发送消息时你需要有对这个目标窗口的引用。 有几种方式可以获取这样的引用
1.1iframe的contentWindow属性如果你有一个iframe元素在你的页面上你可以通过它的contentWindow属性获取对该iframe内部文档的引用。例如
iframe idmyIframe srchttp://example.com/iframe-content.html/iframe
scriptvar iframe document.getElementById(myIframe);var targetWindow iframe.contentWindow;// 现在你可以使用targetWindow来向iframe发送消息targetWindow.postMessage(Hello from parent!, *);
/script
1.2window.open返回的窗口对象当你使用window.open方法打开一个新的窗口或标签页时这个方法会返回一个对新打开窗口的引用。你可以使用这个引用来与新窗口通信。例如
var targetWindow window.open(http://example.com/new-page.html, _blank);
// 使用targetWindow向新窗口发送消息
targetWindow.postMessage(Welcome to the new page!, http://example.com);
1.3window.frames数组或命名窗口如果你的页面包含多个iframe或frames你可以通过window.frames数组来访问它们。每个元素都是对应iframe或frame的窗口对象。此外如果iframe或frame有name属性你还可以通过window.frames[name]来访问它。例如
iframe namemyFrame srchttp://example.com/frame-content.html/iframe
scriptvar targetWindow window.frames[myFrame];// 或者使用数组索引如果iframe是第一个的话// var targetWindow window.frames[0];// 使用targetWindow向iframe发送消息targetWindow.postMessage(Message from main page!, *);
/script
2message,将要发送到目标 window 的数据。字符串对象等都可以。3targetOrigin 通过窗口的 origin 属性来指定哪些窗口能接收到消息事件其值可以是字符串*表示无限制或者一个 URI。在发送消息的时候如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配 targetOrigin 提供的值那么消息就不会被发送只有三者完全匹配消息才会被发送。这个机制用来控制消息可以发送到哪些窗口例如当用 postMessage 传送密码时这个参数就显得尤为重要必须保证它的值与这条包含密码的信息的预期接受者的 origin 属性完全一致来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口那么请始终提供一个有确切值的 targetOrigin而不是 *。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。4[transfer] 常规场景下用不到该属性 [transfer]是一个可选参数它是一个包含可传输对象transferable objects的数组。这个参数允许你在发送消息时将某些特定类型的对象的所有权从发送方直接转移给接收方而不是进行深拷贝。可传输对象通常指的是那些包含大量数据并且深拷贝成本较高的对象比如ArrayBuffer、Map、Set、TypedArray如Int8Array、Uint8Array等以及某些特定类型的ImageBitmap。 通过将这些对象的所有权直接转移给接收方可以大大提高数据传输的效率减少内存使用并提升性能。当你传递一个对象到[transfer]数组时该对象的所有权将被转移发送方将不再拥有该对象而接收方将获得对该对象的完全所有权。这意味着发送方在传输之后不能再访问或修改该对象而接收方可以自由地使用和修改它。 下面是一个使用[transfer]参数的例子
// 假设我们有一个名为otherWindow的引用它指向另一个窗口或iframe
var otherWindow window.open(http://example.com/other-page.html, _blank);// 创建一个ArrayBuffer对象它包含一些数据
var arrayBuffer new ArrayBuffer(16);
var int32View new Int32Array(arrayBuffer);
for (var i 0; i int32View.length; i) {int32View[i] i;
}// 使用postMessage发送ArrayBuffer并将所有权转移给接收方
otherWindow.postMessage({ data: arrayBuffer }, http://example.com, [arrayBuffer]);// 在发送之后发送方不能再访问arrayBuffer因为它的所有权已经被转移了
// 尝试访问可能会导致错误
// console.log(int32View[0]); // Uncaught TypeError: Failed to read the 0 property from Int32Array: The object is no longer valid.// 在接收方窗口中可以通过监听message事件来接收消息和转移的对象
otherWindow.addEventListener(message, function(event) {if (event.origin ! http://your-origin.com) {return; // 忽略不是来自可信源的消息}// 接收方现在拥有arrayBuffer的所有权并可以自由地访问和修改它var receivedArrayBuffer event.data.data;var receivedInt32View new Int32Array(receivedArrayBuffer);console.log(receivedInt32View[0]); // 输出0// 接收方可以修改ArrayBuffer但这不会影响发送方因为所有权已经转移了receivedInt32View[0] 42;
});
在上面的例子中arrayBuffer的所有权被转移给了otherWindow。在发送方窗口中一旦postMessage调用完成arrayBuffer和任何基于它的视图如int32View都将变得不可用尝试访问它们会导致错误。而在接收方窗口中event.data.data将是一个新的ArrayBuffer对象其内容是发送方arrayBuffer的副本并且接收方可以自由地修改和使用它。 请注意不是所有类型的对象都可以被传输。只有那些实现了[[Transfer]]内部方法的对象才能被传输这通常限于上面提到的那些特定类型的对象。 尝试传输不支持的对象将导致错误。
4、targetWindow能不指定吗
答如果不指定接收消息的窗口那么消息只能发往本窗口只有本窗口才会接收到信息。
5、iframe和window都是窗口吗
答window对象表示浏览器窗口是JavaScript中最顶层的对象。iframe元素是HTML中的内联框架元素可以在当前窗口中嵌套另一个窗口因此iframe也可以被视为一个窗口。在JavaScript中可以通过window对象来访问和操作当前窗口而iframe元素也有自己的window对象可以通过iframe的contentWindow属性来访问和操作iframe窗口。
6、监听分发的 message 事件
window.addEventListener(message, receiveMessage, false);
function receiveMessage(event) {var origin event.origin;// 验证了所受到信息的 origin (任何时候你都应该这样做)if (origin ! http://example.org:8080) return;console.log(来信内容如下, event.data)// 把 event.source作为回信的对象再把 event.origin 作为 targetOriginevent.source.postMessage(谢谢我收到你的来信了,event.origin,);
}
event的属性有 data 从其他window传递过来的message数据 origin 调用 postMessage 时消息发送方窗口的 origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。 例如“https://example.org (隐含端口 443)”、“http://example.net (隐含端口 80)”、“http://example.com:8080”。 source 对发送消息的窗口对象的引用; 你可以使用此来在具有不同 origin 的两个窗口之间建立双向通信。 主页面和iframe子页面使用postMessage通讯示例
(注意不要用vscode自带的live preview插件打开页面live preview打开时发现不知从哪触发的各种postMessage信息推荐用live server插件打开页面)
index.html
!DOCTYPE html
htmlheadtitleMain Page/title
/headbodyh1Welcome to the Main Page!/h1iframe srciframe.html idmyIframe width400 height200/iframescript// 获取iframe的引用var iframe document.getElementById(myIframe)// 监听来自iframe的消息window.addEventListener(message, function (event) {// console.log(event)// 这里仅作示例实际应用中务必对event.origin进行验证// if (event.origin ! http://example.com) {// // 验证消息的来源// return// }alert(Received message from iframe: event.data)// 回复iframeiframe.contentWindow.postMessage(Hello from Parent!, *)}, false)// 发送消息给iframefunction sendMessageToIframe () {iframe.contentWindow.postMessage(Hello from Parent!, *)}/scriptbutton onclicksendMessageToIframe()发送消息给iframe/button
/body/html
iframe.html
!DOCTYPE html
htmlheadtitleIframe Page/title
/headbodyh1Welcome to the Iframe Page!/h1button onclicksendMessageToParent()发送消息给parent/buttonscriptfunction sendMessageToParent () {// 向父页面发送消息parent.postMessage(Hello from Iframe!, *)}// 监听来自父页面的消息window.addEventListener(message, function (event) {// console.log(event)// 这里仅作示例实际应用中务必对event.origin进行验证// if (event.origin ! http://example.com) {// // 验证消息的来源// return// }alert(Received message from parent: event.data)}, false);/script
/body/html
