页面iframe跨域传值通信

最新推荐文章于 2024-09-19 15:38:52 发布
最新推荐文章于 2024-09-19 15:38:52 发布
阅读量578 收藏
点赞数 1
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_30908729/article/details/89174306
本文介绍了一种解决跨域iframe通信的方法，当从http://192.168.0.232:8080尝试访问http://127.0.0.1:8080/file_system/时，直接调用parent.document会遇到跨域问题。文章提供了一个有效解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

页面iframe跨域传值通信

 

解决方法：

假如当前的项目的域名端口是http://192.168.0.232:8080，通过页面的iframe访问http://127.0.0.1:8080/file_system/，并接收

 

http://127.0.0.1:8080/file_system/传过来的消息。

<iframe width="100%" height="100%" frameborder="0" src="http://127.0.0.1:8080/file_system/"></iframe>

如果这是直接在子页面上调用parent.document.getElementById("parentUrl").value=''给父页面传值，就遇到跨域问题。

 

解决方法就是：http://www.yayihouse.com/yayishuwu/chapter/1850

跨域传值即主页面与iframe之间互相传值
09-04
主页面A 怎么向 iframe B 传递数据呢？iframe B 怎么向 主页面A 传递数据，下面有不错的实现思路，感兴趣的朋友可以了解下
用postMessage解决跨域通信和跨域调用js问题
u010454239的博客
11-03 2309
本文转自：https://bbs.implug.cn/?thread-3.htm 平时做web开发的时候关于消息传递，除了客户端与服务器传值，还有几个经常会遇到的问题： 多窗口之间消息传递(newWin = window.open(…)); 页面与嵌套的iframe消息传递。 同域名下可以通过parent调用父级页面的js跨域时如何调用。 这里介绍的方法是用运用postMessage方式解决 ...
［javascript］ postmessage
weixin_30713953的博客
10-12 187
摘要 postmessage 作为 html5 跨域传值的解决方法，灰常好用啊。。本次用的是页面a 用iframe 嵌入 页面b。 使用方法 postmessage 参数 otherWindow.postMessage(message, targetOrigin, [transfer]); message 为 待传递的信息，字符串 targetOrigin 为可接收此信息的页面范围， 一般为域名 ...
postMessage，addEventListener， 前端跨域请求之js代码解析
09-05 2405
postMessage，addEventListener 前端跨域发送监听信号
js窗口间通信--postMessage
bob_baobao的博客
03-28 1万+
why我们知道：浏览器限制不同窗口之间的通信，除非同一个域名下的网页。为了解决这一问题，HTML5新出了一个API window.postMessage, 实现了不同域名的窗口通信。 whatMDN上webAPI语法： otherWindow.postMessage(message, targetOrigin);otherWindow: 其他窗口的一个引用，比如iframe的conten
vue3iframe跨域传值
最新发布
01-16
### Vue3 中 iframe 跨域通信解决方案 #### 使用 `postMessage` 方法实现跨域通信 在现代 Web 开发中，`window.postMessage()` 是一种安全可靠的方法来实现在不同源的窗口或框架间传递消息。这种方法不仅适用于...
页面中iframe相互传值传参
10-29
但同时，它也引入了父页面与iframe之间进行数据交换的需求，也就是所谓的“传值传参”。随着浏览器技术的发展，不同浏览器间的兼容性问题成为开发者需要考虑的重要方面。特别是早期的浏览器，如Internet Explorer和...
详解使用postMessage解决iframe跨域通信问题
12-13
在Web开发中，跨域通信是一个常见的挑战，由于浏览器的同源策略限制，不同源的页面之间不能直接共享数据或触发交互。然而，有时候我们需要在一个页面（如主页面）中嵌入另一个页面（如iframe），并实现两者之间的...
【JS】postMessage与MessageChannel
owo_ovo的博客
09-19 1587
【JS】postMessage与MessageChannel
js中窗口的postMessage方法1
08-08
js中窗口的postMessage方法1
iframe 父子传值
鱼塘虾本虾的博客
08-26 431
子页面 window.onload = function(){ window.parent.postMessage("getcolor","*"); window.addEventListener("message", function(e){ var agentid=JSON.parse(e.data).agentid; var mediaA
angularJS 使用postMessage
yuxuan89814的专栏
06-05 975
做的项目，要求页面A和页面B，B是A的子页面，A使用iframe嵌入B页面。A，B是分离的项目，属于不同的域名。 A使用postMessage，给B发送token。 B的前端是angular JS，B的代码如下： myApp.run(function($rootScope,$window){ $window.parent.postMessage("get token",'*'); //...
【JS】postMessage 用法（可以给iframe传值）
热门推荐
qq_45677671的博客
12-08 1万+
跨文档消息，有时候也简称为`XDM(cross-document messaging)`，是一种在不同执行上下文（如不同源的页面）间传递信息的能力。 例如：`www.wrox.com`上的页面想要与包含在内嵌窗格中的`p2p.wrox.com`上面的页面通信 `XMD`的核心就是`postMessage()`方法，将`message`传递给指定窗口
JavaScript postMessage跨域通信
lumot的博客
09-18 808
这玩意儿很早以前就有了，只是一直没流行起来。但是现在差不多可以用用了，下面这个是国内最新的浏览器市场份额数据 　　可见IE8的普及程度已经很高了，所以不做IE7-的网站也渐渐多起来，是时候使用这些东...
js 简单使用postMessage iframe跨域通信
leveretz的博客
11-08 677
js 简单使用postMessage iframe跨域通信
js Postmessage 跨域传输数据的简单应用
chuoban7047的博客
01-05 252
www.test.com <?php @ini_set('default_charset','utf-8'); ?> <inputtype="text"value="send"id="input"/> <inputtype="button"...
JavaScript高级语法之跨域（postMessage，CORS，JSONP）
上善若泪
05-08 3916
目录 1 postMessage概述 1.1 iframe与主页面的通信 2 CORS 2.1 发送请求，“预检”机制 2.2 收到响应 3 JSONP 1 postMessage概述 所谓“同域限制”指的是，出于安全考虑，浏览器只允许脚本与同样协议、同样端口、同样域名的地址进行通信。比如，www1.example.com页面上面的脚本，只能与该域名（相同协议、相同端口）进行通信，...
js中【postMessage】八大点解读+完整示例
2301_79858914的博客
09-11 5796
是一个强大而灵活的 API，能够实现不同窗口、iframe、Web Worker 以及其他上下文之间的安全通信。虽然它简化了跨域通信的实现，但也带来了潜在的安全风险。使用时，必须注意确保消息的发送和接收过程都是可信的，尤其是要谨慎指定和验证消息来源的origin属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值