IFRAME实现跨域通信

最新推荐文章于 2024-04-03 01:51:33 发布
最新推荐文章于 2024-04-03 01:51:33 发布
阅读量2.1k 收藏
点赞数
分类专栏： JavaScript 文章标签： iframe include c url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hulefei29/article/details/3723299
版权
iframe跨域应该是每个前台开发者都会碰到的问题，但是对iframe解决方案却少之又少，最近在网上找到一个可以实现iframe通信的方法，在这里很大家分享一下。

其实原来很简单：
Page A include Page B
Page B include Page C

A和B属于两个域，A和C在同一个域中

A向B通信：通过url
B向C通信：如果不是跨域，只要调用parent就一些调用父窗口的函数以进行通信，而如果是两个域的话调用parent，则会报权限不足的异常，这是就需要一个和父窗口同一个域的Page C，使用url向C中传参数，然后在C中获取参数并调用parent.parent调用A中的函数即可


就是这么简单！！！！
hulefei29
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用iframe实现ajax跨域通信的实现原理(图解)
10-27
一般情况下都是用在同一域下的...但是如果请求是发生在不同的域下，请求就无法执行，并且会抛出异常提示不允许跨域请求,接下来介绍利用iframe实现ajax跨域通信感兴趣的朋友可以了解下，或许对你学习ajax跨域有所帮助
iframe之间的通信
可乐加冰的博客
09-02 1万+
iframe父子页面间的传值与监听
Iframe通信
CamilleZJ的博客
11-26 6231
iframe通信
4种通过iframe跨域与其他页面通信的方式，熬夜整理最全面的HTML字符实体
最新发布
2401_84092360的博客
04-03 412
由于两个页面不在同一个域下，所以浏览器不允许修改parent.location.hash的值，所以要借助于localhost:8080域名下的一个代理iframe的cs3.html页面打开服务器之后打开浏览器访问localhost:8080/cs1.html(不是8081)，就可以看到获取到的数据了，此时页面的hash值已经改变了。hash的值已经更改.PNG缺点：数据直接暴露在了url中数据容量和类型都有限。
iframe之间的通信方式
weixin_45392204的博客
08-16 2784
iframe标签可以实现html主页面嵌套html子页面，那么父子页面间的传值有以下两种方式。
iframe 页面间的通信(分享)
weixin_60547084的博客
01-10 3226
在许多老的项目中使用的都是 iframe 进行的页面嵌套，我这里写了三个页面进行演示红色的页面为最外层，本地开的服务，端口为 5500，而黄色和蓝色的页面分别为第二层和第三层，端口为 5501专门做的不是一个端口，后面会有作用。
iframe 实现跨域，两页面之间的通信
在路上`的博客
09-11 4029
iframe跨域时，iframe组件之间常用的通信，主要是H5的possmessage方法。一个项目为vue2，一个项目为vue3，两个不同的项目实现iframe嵌入，并实现通信。子页面-vue3， (端口号为127.0.0.1:8081)父页面-vue2（端口号为127.0.0.1:8080）
iframe跨域通信封装详解
12-08
iframe跨域通信 查看演示 源码下载 众所周知，由于前端javascript对跨域访问做了安全限制，javascript只能访问与包含它的文档在同一域下的内容。 用法举例： 需求是在http://www.demo.org/top.html中通过iframe...
iframe跨域通信解决方法
10-09
该文档介绍了vue和普通web页面中iframe实现跨域的解决方案，解决了主页面中无法调用iframe方法的问题
iframe+postMessage实现跨域通信
08-22
iframe+postMessage实现跨域通信 window.postMessage()方法安全地启用Window对象之间的跨源通信；例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间。 
多种方案教你实现iframe嵌套页面相互传参(父子通信)
热门推荐
tangdou369098655的博客
06-30 1万+
在工作中，我们会遇到一些需求，使用iframe嵌套另一个页面，这个页面大部分情况下不会部署在父页面相同的域名下，但是又需要父子页面进行数据交互，那么我们该怎么处理呢？接收postMessage方的怎么用呢？postMessage方法有三个参数。欢迎大家指出文章需要改正之处~iframe页面添加代码。iframe页面添加代码。iframe页面添加代码。iframe页面添加代码。一起来看一下效果吧~
iframe通信
Kenom_的博客
06-20 730
iframe通信的两种情况。
iframe嵌入页面跨域通信
m0_51431448的博客
09-07 5862
在项目中可能会通过iframe直接将另一个页面嵌入进来，某些场景下还可能会进行一些消息的传递通信。之前做过一次，就是我们开发的主系统，然后下面还有很多子系统，子系统都是通过iframe嵌入进来的，然后为了实现某些需求，需要将token传递给子系统，拱子系统使用，但是当时一直忙着开发，忘记记录了，所以这篇算是补上吧嵌入进来的页面的window跟我们现在的window已经不是同一个了，更不是同一个document。
与iframe进行跨域交互的解决方案
提笔忘字的帝国
03-12 7108
在Web开发中，为了避免安全漏洞，浏览器会实行同源策略（Same-Origin Policy），即只允许同源网页之间进行交互，而跨域的交互是被禁止的。但是，有时我们需要在不同域名的页面之间进行数据传递和交互。
跨域iframe，iframe组件之间的通信
Ccfitch的博客
06-05 1119
2、当外层组件或者父组件的addEventListener方式不便于修改时（例如是比较旧的项目），也可以通过window.top进行一些另类的操作，下图1是打印出来的iframe里面打印出来的window.top，图2是控制台打印的window.top，可以看iframe里面获取window.top能拿到的信息是有限的。otherWindow指的是目标窗口，也就是要给哪一个window发送消息，是window.frames属性的成员或者是window.open方法创建的窗口。通过window.top!
4种通过iframe跨域与其他页面通信的方式
嘿嘿
03-17 3844
4种通过iframe跨域与其他页面通信的方式 不同域下的iframe不能进行操作。 1、location.hash： 在url中，http://www.baidu.com#helloword的#helloworad就是location.hash，改变hash值不会导致页面刷新，所以可以利用hash值来进行数据的传递，当然数据量是有限的。 假设localhost:8080下有文件cs1.html要和localhost:8081下的cs2.html传递消息，cs1.html首先创建一个隐藏的iframe，
postMessage解决iframe跨域通信
07-22
为了实现 iframe 之间的跨域通信，可以使用 postMessage 方法。 postMessage 是一种 HTML5 提供的跨文档消息传递机制，它允许在不同窗口或 iframe 之间发送消息。通过 postMessage，可以在不同域名之间进行安全的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值