百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

window.postMessage()实现往iframe页面里面发送消息

yuyutoo 2024-10-24 17:49 13 浏览 0 评论

window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如, 在一个页面和它生成的弹出窗口之间, 或者是页面和嵌入其中的iframe之间。

通常情况下, 不同页面上的脚本允许彼此访问, 当且仅当它们源自的页面共享相同的协议, 端口号和主机(也称为"同源策略")。

window.postMessage()提供了一个受控的机制来安全地规避这个限制(如果使用得当的话)。

一般来说, 一个窗口可以获得对另一个窗口的引用(例如, 通过targetWindow=window.opener), 然后使用targetWindow.postMessage()在其上派发MessageEvent。

接收窗口随后可根据需要自行处理此事件。传递给window.postMessage()的参数通过事件对象暴露给接收窗口。

发送消息的基本语法：

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


targetWindow

targetWindow就是接收消息的窗口的引用。 获得该引用的方法包括：

Window.open

Window.opener

HTMLIFrameElement.contentWindow

Window.parent

Window.frames + 索引值


message

message就是要发送到目标窗口的消息。 数据使用结构化克隆算法进行序列化。 这意味着我们可以将各种各样的数据对象安全地传递到目标窗口, 而无需自己对其进行序列化。


targetOrigin

targetOrigin就是指定目标窗口的来源, 必须与消息发送目标相一致, 可以是字符串"*"或URI。 *表示任何目标窗口都可接收, 为安全起见, 请一定要明确提定接收方的URI。


transfer

transfer是可选参数

event对象有三个属性, 分别是origin, data和source。event.origin表示postMessage的发送来源, 包括协议, 域名和端口; event.data表示接收到的消息; event.source表示发送消息的窗口对象的引用;

我们可以用这个引用来建立两个不同来源的窗口之间的双向通信。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>发送消息页面</title>
</head>
<body>
<iframe src="./receive.html" id="receiver" width="600" height="500"></iframe>
<button id="btn">发送消息</button>
</body>
<script>
document.querySelector('#btn').onclick = function () {
document.getElementById('receiver').contentWindow.postMessage("Hello!", "http://localhost:9999");
alert('我发送信息给子窗口了！');
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>接受消息页面</title>
</head>
<body>
<h1>我是接受参数的页面</h1>
</body>
<script>
window.onload = function () {
var NUM = 0;
window.addEventListener('message', function (e) {
console.log(e);
let h1 = document.createElement('h1');
h1.innerHTML = '第' + (NUM++) + '条信息，' + e.data;
document.body.appendChild(h1);
});
}
</script>
</html>

相关推荐

深度解读Spring框架的核心原理

深度解读Spring框架的核心原理在Java开发的世界里，提到Spring框架，就像提起一位久经沙场的老将，它几乎成了企业级应用开发的代名词。那么，这个被无数开发者膜拜的框架究竟有何独特之处？今天，我...

「Spring认证」Spring 框架概述

Spring是最流行的企业Java应用程序开发框架。全球数以百万计的开发人员使用SpringFramework来创建高性能、易于测试和可重用的代码。Spring框架是一个开源的Java...

学习Spring框架 这一篇就够了

1.spring概述1.1Spring是什么（理解）...

Spring框架双核解析:IOC与AOP的本质与实战

#Spring核心#IOC容器#AOP编程#Java框架设计...

Spring Boot与传统Spring框架的对比:探索Java开发的新境界

SpringBoot与传统Spring框架的对比：探索Java开发的新境界在Java生态系统中，Spring框架无疑是一个里程碑式的存在。从最初的简单依赖注入容器，到如今覆盖企业级开发方方面面的庞大...

Spring MVC框架源码深度剖析:从入门到精通

SpringMVC框架源码深度剖析：从入门到精通SpringMVC框架简介SpringMVC作为Spring框架的一部分，为构建Web应用程序提供了强大且灵活的支持。它遵循MVC（Model-V...

Spring框架入门

一.spring是什么？Spring是分层...

程序员必知必会技能之Spring框架基础——面向切面编程!

面向切面编程AOP（AspectOrientedProgramming）与OOP（ObjectOrientedProgramming，面向对象编程）相辅相成。AOP提供了与OOP不同的抽象软件结...

Spring Security安全框架深度解读:为你的应用穿上“钢铁铠甲”

SpringSecurity安全框架深度解读：为你的应用穿上“钢铁铠甲”在现代网络世界里，保护我们的应用程序免受各种威胁攻击至关重要。而在这个过程中，SpringSecurity框架无疑是我们最可...

Spring框架的设计哲学与实现:打造轻量级的企业级Java应用

Spring框架的设计哲学与实现：打造轻量级的企业级Java应用Spring框架自2003年诞生以来，已成为企业级Java应用开发的代名词。它不仅仅是一个框架，更是一种设计理念和哲学的体现。本文将带你...

Spring框架深度解析:从核心原理到底层实现的全方位避坑指南

一、Spring框架核心概念解析1.控制反转（IoC）与依赖注入（DI）Spring的核心思想是通过IoC容器管理对象的生命周期和依赖关系。传统开发中，对象通过new主动创建依赖对象，导致高耦合；而S...

Java框架 —— Spring简介

简介一般来说，Spring指的是SpringFramework，它提供了很多功能，例如：控制反转（IOC）、依赖注入...

Spring 框架概述，模块划分

Spring框架以控制反转（InversionofControl，IoC）和面向切面编程（Aspect-OrientedProgramming，AOP）为核心，旨在简化企业级应用开发，使开发者...

spring框架怎么实现依赖注入?

依赖注入的作用就是在使用Spring框架创建对象时，动态的将其所依赖的对象注入到Bean组件中，其实现方式通常有两种，一种是属性setter方法注入，另一种是构造方法注入。具体介绍如下：●属性set...

Spring框架详解

　　Spring是一种开放源码框架，旨在解决企业应用程序开发的复杂性。一个主要优点就是它的分层体系结构，层次结构让你可以选择要用的组件，同时也为J2EE应用程序开发提供了集成框架。　　Spring特征...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表