[业余难点自学]html5的跨文档消息

业余难点自学1

html5的跨文档消息传输说法错误的是

• 可以实现同域内的 web 页面之间可以互相通信
• 缺点是不能实现跨域通信
• 可以相互传递字符串和对象
• 使用这个功能，需要获取到网页所在窗口对象的实例

解析：H5提供了网页文档之间发送信息和互相接收的功能，使用这个功能，只要获得网页窗口所在对象的实例，即可以同域（端口号+域）相互通信，跨域也可以相互通信

Window postMessage() 方法

• 用于安全地实现跨源通信

otherWindow.postMessage(message, targetOrigin, [transfer]);

• otherWindow： 其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames
• message： 将要发送到其他 window的数据
• targetOrigin： 指定哪些窗口能接收到消息事件，其值可以是 *****（表示无限制）或者一个 URl（通一资源标志符， Uniform Resource Identifier）
• 如 "https://c.runoob.com/runoobtest/demo.html" 的 URI 为 "https://c.runoob.com"
• transfer： 可选，是一串和 message 同时传递的 Transferable 对象，这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权

实例 菜鸟教程测试

• 接收程序

<div id="recMessage">Hello World!</div>
<script>
window.onload = function() {
    // 绑定div#recMessage
    var messageEle = document.getElementById('recMessage');
    window.addEventListener('message', function (e) {  // 监听message事件
        alert(e.origin);  // e.origin：消息源的URI(可能包含协议、域名和端口)，用来验证数据源
        // ===、!==：等同符，相同类型且值相等返回true，不同类型直接返回false
        if (e.origin !== "https://www.runoob.com") {  // 验证消息来源地址
            return;
        }
        // e.data：发送过来的数据  e.source：消息源，消息的发送窗口/iframe
        messageEle.innerHTML = "从"+ e.origin +"收到消息： " + e.data;
    });
}
</script>

• 发送程序

<div>
    <input id="text" type="text" value="Runoob" />
    <button id="sendMessage" >发送消息</button>
</div>
<iframe loading="lazy" id="receiver" src="https://c.runoob.com/runoobtest/postMessage_receiver.html" width="300" height="360">
    <p>你的浏览器不支持 iframe。</p>
</iframe>
<script>
window.onload = function() {
    // 绑定iframe窗口，contentWindow：以HTML对象来返回iframe中的文档，通过DOM方法处理对象
    var receiver = document.getElementById('receiver').contentWindow;
    // 绑定“发送消息”按钮
    var btn = document.getElementById('sendMessage');
    btn.addEventListener('click', function (e) {  // 监听点击事件
        // jQuery event.preventDefault()：阻止元素发生默认的行为
        e.preventDefault();
        // 绑定input#text的输入值
        var val = document.getElementById('text').value;
        // 向URI为https://c.runoob.com的iframe#receiver发送消息
        receiver.postMessage("Hello "+val+"！", "https://c.runoob.com");
    });
}
</script>

HTML DOM addEventListener() 方法

• 用于向文档添加事件句柄

document.addEventListener(event, function, useCapture)

• event：必需，描述事件名称的字符串
  • **注意：**不要使用 “on” 前缀。例如，使用 “click” 来取代 “onclick”
  • HTML DOM Event 对象参考手册
• function：必需，描述了事件触发后执行的函数
  • 当事件触发时，事件对象会作为第一个参数传入函数，事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象
  • 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象
• useCapture：可选，布尔值，指定事件是否 在捕获或冒泡阶段执行
  • true：事件句柄在捕获阶段执行
  • false：默认，事件句柄在冒泡阶段执行

实例 菜鸟教程测试

<p id="demo"></p>
<script>
document.addEventListener("click", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}
</script>