HTML5 Web API:postMessage

最新推荐文章于 2024-01-08 11:26:21 发布
最新推荐文章于 2024-01-08 11:26:21 发布
阅读量415 收藏
点赞数
分类专栏： Web相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x728999452/article/details/52048982
版权

postMessage允许每一个window对象向其他窗口发送文本消息，实现跨窗口的消息传递。不受同源策略限制。

Mozilla Developer Network这么说：window.postMessage 是一个用于安全的使用跨源通信的方法。通常，不同页面上的脚本只在这种情况下被允许互相访问，当且仅当执行它们的页面所处的位置使用相同的协议（通常都是 http）、相同的端口（http默认使用80端口）和相同的主机（两个页面的document.domain 的值相同）。 在正确使用的情况下，window.postMessage 提供了一个受控的机制来安全地绕过这一限制。

示例:

send.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>postMessage send</title>
</head>
<body>
	<iframe src="receive.html" id="iframe"></iframe>
	<form id="form">
		<input type="text" id="msg" value="Message to send"/>
		<input type="submit" value="submit"/>
	</form>
	<script type="text/javascript">
		window.οnlοad=function() {
			var win = document.getElementById("iframe").contentWindow;
			document.getElementById("form").onsubmit = function (e)
			{
				win.postMessage(document.getElementById("msg").value,"*");
				//第二个参数为提供的目标源，*为通配符
				e.preventDefault();
				/*该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果type 属性是"submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。*/
			};
		}
	</script>
</body>
</html>

receive.html 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>postMessage receive</title>
</head>
<body>
	<b>This iframe is to receive</b>
	<div id="test">Send me a message!</div>
	<script type="text/javascript">
		window.addEventListener("message", function(e)
		{
			document.getElementById("test").textContent = e.domain+" said: "+e.data;
		},false);

	</script>
</body>
</html>

有关该API的详细信息，https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

回忆里的褶皱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 API postMessage 实现消息跨域推送
08-29
html5 API postMessage 实现消息跨域推送
HTML5的window.postMessage API
Web 开发&软件开发
07-24 163
HTML5的window.postMessage API 我已经创建了一个MooTools插件来包装window.postMessage：PostMessager。 点击这里下载！ window.postMessage API是鲜为人知HTML5 API之一 。 window.postMessage允许在跨域的两个窗口/框架之间发送数据消息。 本质上，window.postMes...
Web PostMessage
SeriousLose
11-11 878
postMessage API H5新加的内容,支持ie8及其以上. 却可用于实现不同源之间消息通信 使用场景 a标签中有iframe,iframe引用b页面,实现ab页面的相互通信 需要两个页面相互配合 const iframe = document.querySelector('iframe'); iframe.contentWindow.onmessage...
HTML5 postMessage 消息传输与 POST 跨域通信
薄年再无木小白的专栏
03-03 5201
目录 [隐藏] 1. postMessage 功能简介 1.1.监听发送过来的消息 1.2.向其他窗体发送消息 2. worker 多线程 3. 跨域 3.1 父窗体创建跨域iframe并发送信息 3.2 子窗体接收信息并处理（如发起XMLHttpRequest请求） 4. postMessage 总结 5. 相关参考 HTML
html5 postMessage解决跨域、跨窗口消息传递
weixin_43627766的博客
04-17 531
html5 postMessage解决跨域、跨窗口消息传递 一些麻烦事儿 平时做web开发的时候关于消息传递，除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4.上面三个问题的跨域数据传递 postMessage() 这些问题都有一些解决办法，但html5引入的message的API可以更方便、有效、...
html5-apis:HTML5 Web API
05-22
HTML5 Web API是现代网页开发中的重要组成部分，它极大地扩展了浏览器的能力，使得开发者能够创建出功能更加强大、交互性更强的Web应用。本文将深入探讨HTML5 Web API的相关知识点，包括其基本概念、主要特性以及...
HTML5中的postMessage API基本使用教程
09-28
HTML5的`postMessage` API是一种允许不同源的窗口或者框架之间进行安全数据通信的方法，尤其在处理跨域数据交换时非常有用。由于浏览器的安全策略，通常不允许不同源的页面直接访问对方的DOM或共享数据，但`post...
Html5 postMessage实现跨域消息传递
09-28
为了解决同源策略带来的跨域通信难题，HTML5引入了`postMessage` API，允许来自不同源的窗口之间进行有限的消息传递。`postMessage`函数的基本用法如下： ```javascript window.postMessage(msg, targetOrigin); ``...
letswrite-postMessage:postMessage 主页、iframe页可互相传值
05-08
`postMessage`是HTML5引入的一个API，它为Web应用程序提供了一种安全的方式来通信，即使这些程序位于不同的源（domain）下。在`postMessage`中，一个窗口可以发送消息到另一个窗口，并指定接收方，接收方通过监听`...
html5通过postMessage进行跨域通信的方法
09-27
HTML5的`postMessage` API是解决跨域通信问题的关键技术。在Web开发中，由于浏览器的安全策略，不同源的脚本通常无法直接交互。但`postMessage`提供了一种安全的方式，允许不同源的页面之间传递信息。本文将深入探讨...
html5 postMessage
沈纵情
06-13 1847
1、启动服务 pateo@pateo-B86N53X:~$ python -m SimpleHTTPServer 9999 Serving HTTP on 0.0.0.0 port 9999 ... 2、部署应用 pateo@pateo-B86N53X:/var/www$  ls postMessagePortal.html          3、修改host
小结：利用PostMessage实现Web中的跨文档通信
最新发布
SailingCoder的博客
01-08 612
本周开发项目时，做了一个技术小结，帮助快速理解 & 使用 PostMessage。是通信API，它允许不同窗口之间进行跨文档通信，包括同源和跨源的通信。
Web前端iframe使用以及页面通信postmessage
weixin_42845571的博客
06-29 5096
iframe基本内涵 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了 <iframe src="demo_iframe_sandbox.htm"></iframe> iframe常用属性: 1.frameborder:是否显示边框，1(yes),0(no) 2.height:框架作为一个普通元素的高度，建议在使用css设置。 3.width:框架作为一个普通元素的宽度，建议使用css设置。 4.name:框架的名称，window.frames[nam
WebKit(WKScriptMessageHandler)
热门推荐
路漫漫其修远兮，吾将上下而求索！
12-01 3万+
WKScriptMessageHandler
浏览器模拟API客户端发起POST调用后端API接口，亲测有效
cshongye的专栏
12-08 3809
有时候项目组在生产环境需要验证后端API接口的可访问性或者正确，甚至是调用一个初始化方法会受到端口和来源IP的访问限制，所以本机的POSTMAN或者API工具就不能给力了。发现了浏览器本身就可以执行的脚本分享给大家，不光是POST也是可以GET形式访问后端接口。以下示例为调用后端一个POST接口，提交一段JSON到后端，后端接口返回的也是JSON结果并输出到控制台。 比如在谷歌浏览器直接点击更多工具-开发者工具，点击控制台可直接粘贴fetch脚本，回车执行。并不是所有的浏览器版本都支持fetch，可参考
POST或者GET请求调用API
qq_28871287的博客
06-07 1006
Subjects.java import lombok.Data; import java.util.List; @Data public class Subjects { /** * 主题id */ private Long id; /** * 主题内容 */ private String theme; /** * 得票数 */ private Long vote; /** * 浏览量 */ private Long visit; /** * 创建日期 */ private
控制台调用百度api接口实现post请求
ZyLL_123的博客
02-11 1300
控制台调用百度api接口实现post请求 需要注意的是：请求是json格式，要把请求的东西用json包装起来。json = @"{""text"":""苹果是一家伟大的公司""}"; //发送Post请求 var request = (HttpWebRequest)WebRequest.Create(url); //url是...
HTML5 中 postMessage sendMessage 用法
zha_zi的专栏
05-15 265
html5的postmessage实现js前端跨域访问及调用解决方案
争做优秀java技术博客！
06-16 1万+
关于跨域访问，使用JSONP的方法，我前面已经demo过了，具体见http://supercharles888.blog.51cto.com/609344/856886，HTML5提供了一个非常强大的API，叫postMessage，它其实就是以前iframe的进化版本，使用起来极其方便，这里举个实验例子： 我们依旧按照与上文相同的设定，假定我们有2个Domain Domain1: h
dropzone.js asp.net core webapi 编写
07-23
### 回答1： dropzone.js 是一个非常流行的文件上传库，可以方便地在网页中实现文件拖拽上传的功能。而 ASP.NET Core WebAPI 是一个用于构建 Web API 的框架，可以快速地开发和部署具有高性能和可伸缩性的 Web API。 要在 ASP.NET Core WebAPI 中集成 dropzone.js，首先需要在前端代码中引入 dropzone.js 相关的脚本和样式文件。然后，在页面中创建一个用于接收文件上传的表单，并将其配置为使用 dropzone.js 进行文件上传。可以通过配置一些参数来自定义上传行为，例如设置文件上传的最大数量、文件大小限制、文件类型限制等。 在后端代码中，需要创建一个用于处理文件上传的 API 接口，该接口会接收前端发起的文件上传请求，并将上传的文件保存到指定的位置。可以使用 ASP.NET Core WebAPI 提供的 HttpRequest 对象来处理文件上传，通过读取请求的文件流来获取上传的文件内容，并将文件保存到指定的文件夹中。 在接收到文件上传请求后，需要进行一些验证和处理操作。例如，可以检查文件大小和类型是否符合要求，并根据需求进行相应的文件处理，例如修改文件名称、生成缩略图、写入数据库等。处理完成后，可以通过 API 接口返回相应的结果，例如返回上传成功的消息或返回上传失败的原因。 总结来说，使用 dropzone.js 和 ASP.NET Core WebAPI 可以很方便地实现文件上传功能。前端使用 dropzone.js 实现文件拖拽上传，后端使用 ASP.NET Core WebAPI 接受并处理上传的文件。通过结合使用这两个工具，可以轻松地实现一个功能强大且易于维护的文件上传功能。 ### 回答2： dropzone.js是一个基于JavaScript的文件上传库，它可以与asp.net core webapi配合使用来进行文件上传的处理。在使用dropzone.js时，我们需要引入相关的JavaScript和CSS文件，并建立一个HTML表单元素作为文件上传的区域。 在asp.net core webapi中，我们可以编写一个控制器来处理文件上传的请求。首先，我们需要在控制器中添加一个HttpPost方法，用于接收从前端传递过来的文件数据。然后，我们可以使用IFormFile接口来接收和处理上传的文件。 具体的实现步骤如下： 1. 在前端的HTML中，我们需要引入dropzone.js的相关文件，并在表单中定义一个用于文件上传的区域。可以设置一些参数来自定义文件上传的行为。 2. 在asp.net core webapi的控制器中，添加一个HttpPost方法，并使用[FromForm]特性将上传的文件绑定到IFormFile类型的参数中。 3. 在HttpPost方法中，可以对上传的文件进行处理，比如保存到服务器指定的路径中、返回文件的信息等。 主要的代码示例如下: 前端HTML代码： ```html <form action="/api/upload" class="dropzone" id="my-dropzone"></form> ``` 前端JavaScript代码： ```javascript Dropzone.options.myDropzone = { url: "/api/upload", maxFiles: 10, maxFilesize: 5, acceptedFiles: ".pdf,.jpg,.png", init: function () { this.on("success", function (file, response) { console.log("File uploaded:", file); }); }, }; ``` 后端C#代码： ```csharp [ApiController] [Route("api/[controller]")] public class UploadController : ControllerBase { [HttpPost] public async Task<IActionResult> UploadFile([FromForm] IFormFile file) { // 对上传的文件进行处理，比如保存到指定路径中 if (file != null && file.Length > 0) { var filePath = Path.Combine("path/to/save", file.FileName); using (var stream = new FileStream(filePath, FileMode.Create)) { await file.CopyToAsync(stream); } } return Ok(new { message = "File uploaded successfully." }); } } ``` 通过以上代码，我们可以在前端页面中使用dropzone.js来实现文件的上传，并在后端的asp.net core webapi中编写相应的控制器来处理上传的文件。这样就可以实现一个基于dropzone.js和asp.net core webapi的文件上传功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值