分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

html5脚本编程

发布时间:2023-09-06 02:35责任编辑:熊小新关键词:暂无标签

跨文档消息传递:(cross-document message)

有时候简称XDM,指的是来自不同域的页面间传递消息;

XDM的核心是postMessage()方法,目的是向另一个地方传递数据,对于XDM而言,另一个地方指的是包含值本页面的iframe元素,或则由当前页面弹出的窗口;

postMessage()接收两个参数,一条消息和一个表示消息接收方来自哪个域的字符串,第二个参数对保障安全通讯非常重要,可以防止浏览器把消息发送到不安全的地方。

 ???<body> ???<iframe id="iframe" src="http://www.tzding.com" height="300px" width="300px" scrolling="yes"></iframe><script> ?????var iframe=document.getElementById("iframe"); ?????var iframeWindow=iframe.contentWindow; ?????iframeWindow.postMessage("a secret","*");//来自任何域,不推荐 ?????iframeWindow.postMessage("a secret","http://www.baidu.com");//来自百度 ???????</script></body>

接收XDM消息时,会触发window对象的message事件,是异步触发的,会有延迟,传递给message事件的事件对象包含三个重要信息:

data:作为postMessage()第一个参数传入的字符串数据;

origin:发送消息的文档所在的域,例如:"http://www.baidu.com"

source:发送消息的文档的window对象的代理。这个代理对象主要用于在发送上一条消息的窗口调用postMessage()方法。如果发送消息的窗口来自同一个域,那这个对象就是window。

收到消息后验证发送窗口的来源是至关重要的,就像给postMessage()方法指定第二个参数,以确保浏览器不会把消息发送给未知页面一样,在onmessage处理程序中检测消息来源可以确保传入的消息来自已知页面。基本验证模式如下:

 ???window.addEventListener("window","message",function(event){ ???????????//确保发送消息的域是已知的域 ???????????if(event.origin=="http://www.baidu.com"){ ???????????????//处理接收到的数据 ???????????????console.log(event.data); ???????????????//可选:向来源窗口发送回执 ???????????????event.source.postMessage("Received!","http://www.baidu.com") ???????????} ?????})

postMessage()方法的第一个参数必须是字符串,也可以传其它结构数据,调用JSON.stringify(),在onmessage事件处理程序中,用JSON.parse()

将json字符串转回成json格式;

不过iframe正在淡出前端开发,因为它有很多的缺点,不如ajax,了解一下;

html5脚本编程

原文地址:https://www.cnblogs.com/fqh123/p/10562035.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved