window.name + iframe 解决跨域问题

最新推荐文章于 2023-11-11 14:19:29 发布
最新推荐文章于 2023-11-11 14:19:29 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 跨域 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AnitaSun/article/details/117979795
版权

原理

  • 每个窗口都有自己独立的 window.name
  • 当修改一个窗口的src属性的时候，不会影响这个窗口的 window.name 属性
  • window.name可以存储不超过2M的数据，传递的数据都会变成string类型

例

准备
  • a.html，在localhost:3000上
  • b.html，在localhost:3000上
  • c.html，在localhost:4000上

a 和 b 是同源的，c 是独立的

a 先引用c，c把值放到window.name中，然后把a引用的地址改到b
代码
  • a.html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
    <iframe id="iframe" src="http://localhost:4000/c.html" frameborder="0" "load()"></iframe>
    <script type="text/javascript">
        let first = true;//第一次加载
        function load(){
          if(first){
              let iframe = document.querySelector("#iframe");
              iframe.src = 'http://localhost:3000/b.html';
              first = false;
          }else{
              console.log(iframe.contentWindow.name);//yuhua
          }
     }
 </script>
</body>
</html>
  • b.html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>

</body>
</html>
  • c.html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    c页面
    <script type="text/javascript">
        window.name = 'yuhua';
    </script>
</body>
</html>
Anita-Sun
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
完美解决iframe跨域问题
04-18
框架完美解决了iframe之间的跨域通讯。底层技术采用window.name转换代理实现
javascript跨域总结之window.name实现的跨域数据传输
10-23
本文给大家介绍window.name实现的跨域数据传输，自己亲自实践了一下，真的非常好用，特此分享到脚本之家网站供大家参考
跨域：利用iframe实现跨域DOM互访的四种方式
qq_68163788的博客
11-11 5812
使用 iframe 实现跨域访问是一种常见的技术。通过将另一个域的内容嵌入到当前页面的 iframe 中，可以实现跨域访问。这种方法通常用于在网页中嵌入来自不同域的内容，比如嵌入其他网站的地图、视频或其他资源。 但需要注意的是，由于安全原因，浏览器通常会限制跨域访问，因此在使用 iframe 实现跨域访问时，需要确保被嵌入的内容允许跨域访问，或者采取其他安全措施来确保安全性。使用 iframe 实现跨域访问是一种常见的技术。通过将另一个域的内容嵌入到当前页面的 iframe 中，可以实现跨域访问。
跨域--window.name + iframe
liuliuliu_666的博客
09-06 726
name在浏览器环境中是一个全局/window对象的属性，且挡在frame中加载新页面时，name的属性值依旧保持不变。 通过在iframe中加载一个资源，该目标页面将设置frame的name属性。此name属性值可被获取到，以访问web服务发送的信息。 但name属性仅对相同域名的frame可访问。这意味着为了访问name属性，当远程web服务页面被加载后，必须导航frame回到原始域。 同
前端常见跨域解决方案（全）
weixin_34281537的博客
09-13 2206
什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@f...
跨域的十种解决方案详解（总结）
MoXinXueWEB的博客
07-26 7977
小菜鸟在总结
window.name解决跨域数据传输问题
09-22
原文：http://research.microsoft.com/~helenw/papers/subspace.pdfwindow.name 传输技术，原本是 Thomas Frank 用于解决 cookie 的一些劣势（每个域名 4 x 20 Kb 的限制、数据只能是字符串、设置和获取 cookie 语法...
javascript使用window.name解决跨域问题第1/2页
10-30
需要注意的是，虽然`window.name`提供了一种强大的跨域解决方案，但它也有其局限性。例如，由于所有后续页面都能访问顶级窗口的`window.name`，所以它并不适合存储敏感信息。此外，这种方法依赖于`iframe`，可能会受...
window.name解决跨域问题的文档
11-17
window.name 解决跨域问题的文档 window.name 传输技术是 Thomas Frank 发明的，旨在解决 cookie 的一些劣势，例如每个域名 4 x 20 Kb 的限制、数据只能是字符串、设置和获取 cookie 语法的复杂等等。后来，Kris ...
PHP下ajax跨域的解决方案之window.name实例分析
10-15
总结起来，PHP下利用`window.name`解决AJAX跨域的问题，主要是通过在目标页面设置`window.name`，然后通过同源的代理页面读取这些数据。这种方式虽然相对简单，但并非适用于所有场景，因此在实际开发中，还需要根据...
跨域问题 之 window.name
05-24
NULL 博文链接：https://yiminghe.iteye.com/blog/346796
js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)
aihanguang7682的博客
05-08 262
一、浏览器同源策略 首先我们需要了解一下浏览器的同源策略，关于同源策略可以仔细看看知乎上的一个解释。传送门 总之：同协议，domain（或ip），同端口视为同一个域，一个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略。 (现代浏览器在安全性和可用性之间选择了一个平衡点。在遵循同源策略的基础上，选择性...
利用window.name解决跨域问题
Anvil的专栏
03-22 3327
<br />原文：http://www.alisdn.com/wordpress/?p=433<br /><br />之前在怿飞的博客上看到一篇关于window.name解决跨域问题的文章，给web前端的跨域问题提供了另外一种选择，但是里面的例子写得不是很简洁，这里从一个简单的例子，来说明该机制的应用。具体的机制说明可以参考http://www.planabc.net/2008/09/01/window_name_transport/<br /> <br />该例子准备了3个页面，分别为A、B、C。A是主页
window.name实现跨域
weixin_33991727的博客
08-21 187
 　　在 http://www.cnblogs.com/zhuzhenwei918/p/6759459.html 这篇文章中，我提到了几种跨域的方式，这里主要讲解使用window.name实现跨域。 　　 跨域就是说必须同协议、域名、端口号，我们才能获取其内容，对其进行访问。    　　window.name这个属性不是一个简单的全局属性 --- 只要在一个window下，无论url怎么变化...
window.name跨域通讯小坑一记
GAMELOFT9----纸上得来终觉浅，绝知此事要躬行
09-17 384
工作中有这么一个需求，在支付完成之后，延迟3秒跳转到商户的广告页面。在广告页面通过返回按钮，可以再次返回到支付完成的详情页面，但此时延迟3秒后不会再次跳转到商户广告页面。 很明显，需要存一个标记，表示是否已经跳转过了。当时觉得window.name应该就可以胜任这个任务。 window.name 我们在js里面随时可以获取window对象，window对象有一个name属性，如下所示： 这个na...
Node 环境下 axios 的 proxy 配置—— https-proxy-agent
热门推荐
AnitaSun的博客
11-29 1万+
app.js 端口号 3000 node app.jsvar express = require('express'); const path = require('path'); const axios = require("axios"); const HttpsProxyAgent = require("https-proxy-agent"); var app = express(); app.set('port', 3000); app.get('/', function(re.
iframe跨域问题怎么解决
最新发布
05-06
当网页中嵌套了来自不同域名的iframe时，由于浏览器的同源策略限制，可能会导致跨域问题。解决iframe跨域问题的方法有以下几种： 1. 使用postMessage：通过在父页面和子页面之间使用postMessage方法进行通信，可以实现跨域数据传输。父页面通过postMessage向子页面发送消息，子页面通过监听message事件接收消息，并进行相应处理。 2. 设置document.domain：如果两个页面的域名只是在子域名上有差异，可以通过设置document.domain属性来实现跨域通信。将两个页面的document.domain都设置为相同的主域名，就可以实现跨域访问。 3. 使用window.name：利用window.name属性可以在不同域名的页面之间进行数据传递。父页面将数据存储在window.name中，然后在子页面中通过访问父页面的window.name来获取数据。 4. 使用代理页面：可以通过在同一域名下创建一个代理页面来解决跨域问题。代理页面位于与父页面和子页面同一域名下，可以作为中间人来进行数据传输。 5. 跨域资源共享（CORS）：如果服务器支持CORS，可以在服务器端设置响应头部信息，允许跨域访问。通过在服务器端设置Access-Control-Allow-Origin等相关头部信息，可以实现跨域资源共享。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值