window.postMessage()实现往iframe页面里面发送消息
lipiwang 2024-12-04 13:42 6 浏览 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>
- 上一篇：浏览器窗口弹窗被拦截解决
- 下一篇：target =“_ blank”背后的隐藏漏洞
相关推荐
- 前端 JavaScript 字符串中提取数字
-
varstr="4500元";varnum=parseInt(str);alert(num);//4500如果字符串前面有非数字字符，上面这种方法就不行了：var...
- 使用JavaScript如何获取网站网址（js如何获取浏览器信息）
-
在做网站开发时，我们有时候会获取当前页面的完整路径。在网页前端如何实现呢？请在网页脚本代码段中粘贴如下代码。functiongetRootPath(){//获取当前网址，...
- java文本对比工具源码8（java比较文本相似度）
-
/***ParseatextualrepresentationofpatchesandreturnaListofPatch*objects.*@paramtextline...
- JavaScript实现的9大排序算法（js排序方法）
-
笔试面试经常涉及各种算法，本文简要介绍常用的一些算法，并用JavaScript实现。1、插入排序1）算法简介插入排序（Insertion-Sort）的算法描述是一种简单直观的排序算法。它的工作原理是通...
- 使用函数化的Javascript代码编写方式
-
对于Javascript介绍想必大家都耳熟能详啦，基于函数化的编程语言，基于浏览器运行的编程语言，web开发语言，前端开发必备语言，blablabla...Javascript是一个非常灵...
- Js基础31:内置对象（js内置对象是什么意思）
-
js里面的对象分成三大类：内置对象ArrayDateMath宿主对象浏览器提供的对象(如bom、dom等等)自定义对象开发人员自己定义的对象内置对象——所谓内置对象，就是JavaScript自...
- js获取上传文件类型以及大小的方法
-
前端web上传文件时，需要在上传之前判断一下文件的类型以及文件的大小，HTML为前端的标记语言是无法做到这一点，只能使用javascript动态脚本代码来实现。js获取上传文件大小的方法示例代码：&...
- 黑客入门实践:如何绕过前端过滤上传文件
-
今天开始，我们就要开始学习具体的漏洞了，但是希望大家学完后，不要轻易"入侵"网站哦，当时测试环境下除外。今天的课程是关于“文件上传漏洞”，据安界网的老师介绍，文件上传漏洞仅次于命令执行...
- Java文件上传细讲（java文件夹上传）
-
什么是文件上传？文件上传就是把用户的信息保存起来。为什么需要文件上传？在用户注册的时候，可能需要用户提交照片。那么这张照片就应该要进行保存。免费学习资料获取方式上传组件(工具)为什么我们要使用上传工具...
- 鸿蒙上实现“翻译”功能（鸿蒙宴全文翻译）
-
本章节我们来制作中文翻译成英文的实例（运行在HarmonyOS上），通过HTTP去配合API进行实现。需求分析如下：文字输入HTTP协议使用文字翻译控件介绍①HTTP数据请求官方文档请求...
- JavaScript从入门到精通（javascript 入门教程）
-
前几天，我们学习了JavaScript的入门课程，但是要想做网站，仅仅学会入门是不够的，今后的几天，我将带领大家精通JavaScript，希望大家好好学习！JS内置对象String对象：字符串对象，提...
- 第15天|16天搞定前端，javascript语法篇(干货)
-
JavaScript是互联网上最流行的脚本语言，这门语言可用于HTML和web，可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。它是一个脚本语言，它是一个轻量级，但功能强大的编程...
- 通过js来实现打字效果（js如何输入）
-
有时候浏览网页经常会看见一些页面出现一些打字的效果，那么是怎么实现的呢？逻辑确定目标容器，在哪个容器进行输出确定输出内容，当前直接根据目标容器确定输出内容即可需要控制输出频率，因此需要循环输出完毕代码...
- 手把手教你学会一键还原混淆js原理
-
1.短变量名在以下示例代码中，我们将变量“customerName”替换为“a”：vara="JohnSmith";console.log(a);2.随机变量名在以下示例代码...
- sql中常用的字符串函数详解（sql字符串函数有哪些）
-
在日常开发中遇到处理最多的可能字符串要算其中一个了，什么替换啊截取啊大小写转换啊、删除空格啊等等，这些操作我们可以在前端操作，也可以直接在数据库的sql中操作，那么我们来看一下sql中处理字符串的...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- maven镜像 (69)
- undefined reference to (60)
- zip格式 (63)
- oracle over (62)
- date_format函数用法 (67)
- 在线代理服务器 (60)
- shell 字符串比较 (74)
- x509证书 (61)
- localhost (65)
- java.awt.headless (66)
- syn_sent (64)
- settings.xml (59)
- 弹出窗口 (56)
- applicationcontextaware (72)
- my.cnf (73)
- httpsession (62)
- pkcs7 (62)
- session cookie (63)
- java 生成uuid (58)
- could not initialize class (58)
- beanpropertyrowmapper (58)
- word空格下划线不显示 (73)
- jar文件 (60)
- jsp内置对象 (58)
- makefile编写规则 (58)