html5的postmessage实现js前端跨域访问及调用解决方案

最新推荐文章于 2024-09-11 07:57:51 发布
最新推荐文章于 2024-09-11 07:57:51 发布
阅读量1.2w 收藏 4
点赞数 1
分类专栏： java技术 IT技术 文章标签： java 前端 html5 jsonp 跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fuxiaohui/article/details/31377427
版权
本文介绍了如何使用HTML5的postMessage API解决跨域访问问题。通过示例展示了如何在两个不同域的应用之间传递JSON数据，详细解释了发送者(Domain1)如何通过iframe与接收者(Domain2)进行通信，并提供了详细的代码实现。
摘要由CSDN通过智能技术生成

关于跨域访问，使用JSONP的方法，我前面已经demo过了，具体见http://supercharles888.blog.51cto.com/609344/856886，HTML5提供了一个非常强大的API，叫postMessage，它其实就是以前iframe的进化版本，使用起来极其方便，这里举个实验例子：

我们依旧按照与上文相同的设定，假定我们有2个Domain

Domain1: http://localhost:8080  它上面有个应用叫HTMLDomain1，并且有个页面叫sender.html。

Domain2:http://localhost:8180 它上面有个应用叫HTMLDomain2,并且有个页面叫receiver.html。

我现在的需求是，假定Domain1上我们有个json数据，我们想让Domain2应用中的javascript要可以操作这个json 数据（注意，这里已经是跨域了，因为Domain2上的js操作了Domain1上的数据），应该怎么办呢？

解决方案就是用HTML5的postMessage方法

Domain2的代码:

首先，我们在Domain2上创建一个HTM

最低0.47元/天 解锁文章
孤独的远行者
关注
专栏目录
常见的9种前端跨域解决方案详解
JackieDYH的博客
03-04 1558
一、什么是跨域？   在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。 什么是同源策略？   同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。   同源策略限制以下几种行为： Cookie、LocalStorage 和 IndexDB .
postMessage实现Js、Javascript跨域通信
How_about_yes
12-08 1718
一、概要介绍 1、什么是跨域？ 跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做，它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。跨域的严格的定义是：只要 协议，域名，端口有任何一个的不同，就被当作是跨域。2、跨域通信的解决方法： （1）通过jsonp实现跨域...
【JS】504- HTML5 之跨域通讯（postMessage）
pingan8787
02-16 510
本文来自公众号【前端早读课】，最近工作中用在使用 postMessage ，所以一起分享给大家一下~前言大家跨域的文章估计也看了很多了。这次应用到一个场景中了解了一下。今日早读文章由高途...
js中【postMessage】八大点解读+完整示例
最新发布
2301_79858914的博客
09-11 1799
是一个强大而灵活的 API，能够实现不同窗口、iframe、Web Worker 以及其他上下文之间的安全通信。虽然它简化了跨域通信的实现，但也带来了潜在的安全风险。使用时，必须注意确保消息的发送和接收过程都是可信的，尤其是要谨慎指定和验证消息来源的origin属性。
JavaScript高级语法之跨域（postMessage，CORS，JSONP）
上善若泪
05-08 3527
目录 1 postMessage概述 1.1 iframe与主页面的通信 2 CORS 2.1 发送请求，“预检”机制 2.2 收到响应 3 JSONP 1 postMessage概述 所谓“同域限制”指的是，出于安全考虑，浏览器只允许脚本与同样协议、同样端口、同样域名的地址进行通信。比如，www1.example.com页面上面的脚本，只能与该域名（相同协议、相同端口）进行通信，...
跨域访问的解决方案（HTML5的方法：postMessage)
weixin_34319374的博客
05-08 126
关于跨域访问，使用JSONP的方法，我前面已经demo过了，具体见http://supercharles888.blog.51cto.com/609344/856886，HTML5提供了一个非常强大的API，叫postMessage，它其实就是以前iframe的进化版本，使用起来极其方便，这里举个实验例子： 我们依旧按照与上文相同的设定，假定我们有2个Domain D...
postMessage - 跨域消息传递
热门推荐
huangpb的博客
11-04 7万+
window.postMessage() 方法可以安全地实现跨域通信和页面间数据通信。 postMessage 可用于解决以下方面的问题： 页面和其打开的新窗口的数据传递 页面与嵌套的 iframe 消息传递 多窗口之间消息传递 想要使用 postMessage 实现跨域和页面间数据通信，只要记住 window 提供的 postMessage 方法和 message 事件就ok了。 语法...
js前端解决跨域问题的8种方案（最新最全）
10-21
- **POST Message API**：利用`window.postMessage()`方法，可以在不同源的窗口之间传递消息，实现跨域通信。这种方法适用于IFrame、窗口、弹出窗口等。 - **代理服务器(Proxy Server)**：在服务器端设置一个代理...
解决前端跨域问题方案汇总
11-28
【跨域介绍】 ...以上方法各有优缺点，开发者需根据实际需求选择合适的跨域解决方案。在实际项目中，通常会结合多种方法，以达到最佳效果。在使用这些方法时，需要充分理解其工作原理，以确保安全性和效率。
ajax跨域访问遇到的问题及解决方案
10-16
**Ajax跨域访问** 是一个常见的前端开发中遇到的问题，主要涉及到浏览器的同源策略限制。同源策略是指，浏览器的JavaScript代码只能访问与当前页面同协议、同域名、同端口的资源，以防止恶意脚本从一个站点窃取另一...
JavaScript中postMessage()方法解决跨域问题记录
12-14 664
posetMessage的APIhttps://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage 经过测试大部分跨域问题能解决，但input:file单击事件跨域解决不了，测试代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&g
postmessage解决iframe页面跨域
10-19
通过JS技术解决引入iframe页面引起的跨域问题，postmessage解决iframe页面跨域问题
html5通过postMessage进行跨域通信的方法
12-14
最近工作中遇到一个需求，场景是：h5页作为预览模块内嵌在pc页中，用户在pc页中能够做一些操作，然后h5做出响应式变化，达到预览的效果。 这里首先想到就是把h5页面用iframe内嵌到pc网页中，然后pc通过postMessage方法，把变化的数据发送给iframe，iframe内嵌的h5通过addEventListener接收数据，再对数据做响应式的变化。 这里总结一下postMessage的使用，api很简单： otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow是目标窗口的引用，在当前场景下就是i
crosstalk.js:使用 postMessage 随时随地与任何内容交谈
06-04
串扰.js crosstalk.js 是一个很小的（2kb 缩小）库，它使跨域甚至跨协议通信变得非常干净和容易。 为什么要使用它？ 也许您分发了一个将在本地打开的 HTML 文件（使用 file:// 协议），但它需要与 API 服务器通信（使用 http:// 或 https:// 协议）。 串扰可让您从任何地方加载帧并轻松通过它进行通信。 这种需求并不经常出现，但一旦出现，这将使您的生活变得非常轻松。 使用串扰 使用 crosstalk.js 非常简单。 您只需要在要与之通信的每个页面中包含该库。 在您的主窗口中，执行以下操作： var channel = new Crosstalk({ // Optional; defaults to '*' origin: 'http://mysite.com', // Required source: '
用postMessage解决跨域通信和跨域调用js问题
u010454239的博客
11-03 2227
本文转自：https://bbs.implug.cn/?thread-3.htm 平时做web开发的时候关于消息传递，除了客户端与服务器传值，还有几个经常会遇到的问题： 多窗口之间消息传递(newWin = window.open(…)); 页面与嵌套的iframe消息传递。 同域名下可以通过parent调用父级页面的js跨域时如何调用。 这里介绍的方法是用运用postMessage方式解决 ...
js跨域总结（jsonp，postMessage，CORS）
lululul123的博客
08-02 2290
跨域 当协议，子域名，主域名，端口中任何一个不相同的时候，都算做不同域。不同域之间相互请求资源，就是属于跨域。Js处于安全方面考虑，不允许跨域调用其他页面的对象。 简单的说，跨域因为js同源策略的限制。a.com域名下的js无法操场b.com或c.a.com域下的对象。 现实生活中，一个公司有多个子公司，或者一个公司和另一个公司合作。这就不可避免的要出现跨域情况。 为了在必要的时候实现跨域
前端postMessage跨域通讯
weixin_45966674的博客
09-17 469
然后数据回传就比较简单了 你直接在项目2 中也写一个iframe 套项目1的地址 然后把这个iframe 隐藏起来就好了 然后项目1也写一个window.addEventListener message 接收项目2发来的数据就好了。然后我们在 项目1的输入中输入内容 控制台会输出内容 那么问题是 我们怎么把这个信息给到项目2呢？我们改写项目1 的 App.vue中的 oninput方法 参考代码如下。此时 我们在 项目1中输入内容 项目2的message就可以监听得到。
前端跨域之PostMessage详解
风萧萧兮易水寒
09-05 3379
window.postMessage()方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数Document.domain设置为相同的值) 时，这两个脚本才能相互通信。 otherWindow.postMessage(message, targetOrigin,...
vue路由传参的两种方式,实现返回上个页面不刷新
anny_mei的博客
07-17 1万+
我的项目是当在新增页面(下面叫A页面)先提交一些数据,然后跳转到下一个页面(下面叫B页面)再填写数据,然后返回到新增的页面 之前我直接跳转回B页面goback(),这样的话跳转回来A页面就什么数据都没有了 解决方法有两种,一种是在地址栏里面拿参数 this.$router.push({ name:'xxxxxxxxx', // 跳转的页面名称 params:{ id:this.id || "xxxxxxxxxx" } }) 在
前端跨域解决方案详解与示例
发送方调用`postMessage()`方法，接收方监听`message`事件。 8. CORS资源共享与CSP(Content Security Policy)的兼容性 CSP用于限制加载资源的来源，防止XSS攻击。在使用CORS时，需要确保CSP策略允许跨域请求。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值