我的编程空间,编程开发者的网络收藏夹
学习永远不晚

html5跨文档消息传输的方法

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

html5跨文档消息传输的方法

这篇文章主要介绍了html5跨文档消息传输的方法的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇html5跨文档消息传输的方法文章都会有所收获,下面我们一起来看看吧。

对窗口对象的message事件进行监听

复制代码

代码如下:

window.addEventListener("message", function(event) {

// 处理程序代码

}, false);

使用window对象的postMessage()方法向其他窗口发送消息,该方法的定义如下:

复制代码

代码如下:

otherwindow.postMessage(message, targetOrigin);

该方法使用两个参数:第一个参数为所发送的消息文本,但也可以是任何JavaScript对象(通过JSON转换对象为文本);第二个参数为接收消息的对象窗口的URL地址,可以在URL地址字符串中使用通配符“*”指定全部地址,不过建议使用准确的URL地址。otherwindow为要发送窗口对象的引用,可以通过window.open()方法返回该对象,或通过对window.frames数组指定序号(index)或名字的方式来返回单个frame所属性的窗口对象。

示例

复制代码

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<title>跨文档消息传输示例主文档</title>

<script type="text/javascript" class="lazy" data-src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script type="text/javascript">

$(function() {

// 监听message事件。

window.addEventListener("message", function(event) {

// 忽略指定URL之外的页面发送的消息。

if(event.origin != "http://www.blue-butterfly.net") return;

alert(event.data); // 显示消息。

}, false);

$("#iframeContent").load(function(event) {

// 向子页面发送消息

this[0].postMessage("Hello", "http://www.blue-butterfly.net/test/");

});

});

</script>

</head>

<body>

<header>

<h2>跨域通信示例</h2>

</header>

<iframe id="iframeContent" width="400" class="lazy" data-src="http://www.blue-butterfly.net/test/"></iframe>

</body>

</html>

子页面中的代码如下:

复制代码

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<script type="text/javascript" class="lazy" data-src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script type="text/javascript">

$(function() {

window.addEventListener("message", function(event) {

if(event.origin != "http://Lulingniu") return;

$("#console").append(event.origin).append("传来的消息:").append(event.data);

// 向主页面发送消息。

event.source.postMessage("Hello, there is :" + this.location, event.origin);

}, false);

});

</script>

</head>

<body>

<p>这是iframe中的内容。</p>

<div id="console"></div>

</body>

</html>

&bull;通过对window对象的message事件进行监听,可以接收消息。

&bull;通过访问message事件的origin属性,可以获取消息的发送源(本例中主页面的发送源为“http://Lulingniu”,子页面的发送源为“http://www.blue-butterfly.net”)。注意:发送源与网站的URL地址不是一个概念,发送源只包括域名与端口号,为了不接收其他源恶意发送过来的消息,最好对发送源做检查。

&bull;通过访问message事件的data属性,可以取得消息内容(可以是任何JavaScript对象,使用JSON)。

&bull;使用postMessage()方法发送消息。

&bull;通过访问message事件的source属性,可以获取消息发送源的窗口的代理对象。

关于“html5跨文档消息传输的方法”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“html5跨文档消息传输的方法”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

html5跨文档消息传输的方法

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

怎么在html5中实现跨文档消息传输

怎么在html5中实现跨文档消息传输?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。代码如下:window.addEventListener("message", functio
2023-06-09

Linux系统的文件传输方法

1.文件在系统中的传输1.scpscp file user@ip:/dir #上传 scp user@ip:/file dir #下载2.rsync远程同步,速度快,默认会忽略文件属性、链接文件、设备文件 rsync -参数 file
2022-06-04

DedeCMS 批量取消审核文档的实现方法

今天修改了几个地方的代码 实现了在原来dede文章批量管理的地方 添加一个 “取消审核” 如下图:实现方法:修改管理目录(默认为dede)下的文件:archives_do.php 插入以下代码(位置随意 可以放审核文
2022-06-12

数据流在消息队列遥测传输(MQTT)中的工作方式

随着第四次工业革命的到来,这个系统成为可能。它带来了物联网、机器人、人工智能和其他新兴的颠覆性技术。

linux ssh传输文件的方法是什么

在Linux系统中,可以使用scp命令通过SSH传输文件。scp命令的语法如下:```scp [可选参数] [源文件路径] [目标服务器用户名@目标服务器IP地址或主机名:目标文件路径]```其中,可选参数如下:- -r:递归复制整个目录。
2023-09-17

本地文件传输到vps的方法是什么

将本地文件传输到VPS有多种方法,以下是常见的几种方法:1. 使用SCP命令:SCP是Secure Copy的缩写,它是基于SSH协议的文件传输工具。你可以使用以下命令将本地文件传输到VPS:```scp /path/to/local/fi
2023-08-16

linux服务器传输文件的方法是什么

在Linux服务器上,可以使用多种方法来传输文件,以下是一些常用的方法:SCP(Secure Copy):SCP是基于SSH协议的文件传输工具,可以通过命令行将文件从本地计算机传输到远程服务器,或者从远程服务器传输到本地计算机。示例命令:s
linux服务器传输文件的方法是什么
2024-04-26

golang实现大文件传输的方法是什么

在Golang中实现大文件传输可以使用以下方法之一:1. 使用基于TCP的传输:可以使用net或net/http包来实现基于TCP的文件传输。发送方将文件分成较小的块,并将每个块作为TCP数据包发送给接收方,接收方接收并重组这些块以还原原始
2023-10-20

两台Linux间传输文件的方法是什么

本篇内容主要讲解“两台Linux间传输文件的方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“两台Linux间传输文件的方法是什么”吧!两台Linux系统之间要想传输文件可以采用的方式有很
2023-06-28

Windows与Linux之间文件传输的方法图解

Windows与linux之间文件传输 (1)、使用WinSCP工具,实现将Windows的文件上传到Linux指定目录下(1)、输入主机名、用户名、密码,选择登录,成功连接至Linux系统(2)、在左侧列表,选择要上YDbtzqqUG传文
2022-06-04

云服务器传输文件的方法是什么

云服务器传输文件的方法有多种,以下是一些常用的方法:1. Secure Copy Protocol (SCP):使用SCP可以通过SSH协议安全地传输文件。可以使用SCP命令将本地文件复制到云服务器上,或将云服务器上的文件复制到本地。2.
2023-08-08

python局域网传输文件的方法是什么

Python可以使用多种方法在局域网中传输文件,以下是几种常用的方法:使用Socket编程:可以使用Python的socket模块创建一个服务器和客户端,通过网络套接字在局域网中传输文件。使用FTP协议:可以使用Python的ftplib模
2023-10-27

云服务器linux传输文件的方法是什么

云服务器Linux文件传输方法本指南介绍了在Linux系统之间安全传输文件的多种方法:SCP(安全复制):加密且安全的远程文件传输,使用SSH协议。SFTP(SSH文件传输协议):通过SSH提供命令行文件传输界面。Rsync(远程同步):用于增量同步本地和远程文件系统。FTP(文件传输协议):广泛使用的文件传输协议,通过TCP连接传输文件。WebDAV(基于Web的分布式创作和版本控制):允许通过HTTP接口访问远程文件系统。选择最佳方法取决于安全需求、传输效率、易用性和可访问性。
云服务器linux传输文件的方法是什么
2024-04-09

云服务器linux传输文件的方法是什么

云服务器Linux传输文件的方法有多种,以下是几种常用的方法:1. SCP(Secure Copy):SCP是一个安全的文件传输工具,可以通过SSH协议在本地和远程服务器之间复制文件。使用命令`scp`可以将文件从本地复制到云服务器,或从云
2023-09-23

Java使用Socket通信传输文件的方法示例

本文实例讲述了Java使用Socket通信传输文件的方法。分享给大家供大家参考,具体如下:前面几篇文章介绍了使用Java的Socket编程和NIO包在Socket中的应用,这篇文章说说怎样利用Socket编程来实现简单的文件传输。这里由于前
2023-05-31

编程热搜

目录