嵌套页面iframe 内部链接跳转跨域问题

最新推荐文章于 2023-06-08 09:18:17 发布
最新推荐文章于 2023-06-08 09:18:17 发布
阅读量3.1k 收藏 6
点赞数
分类专栏： 前端 文章标签： iframe 跨域 链接跳转
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu_xue_xue/article/details/110221653
版权

问题：如果直接在嵌套页面里面使用window.location.href='http://www.xxx.xx',会发现页面无法跳转，甚至出现跨域问题

解决：通过window.top.location.href 或者 window.parent.location.href 跳转

两者区别如下：

  1. window.parent.location 用于更改父窗口的位置。

  2. window.top.location

    • 它是对象'window'的属性。

    • 它返回窗口层次结构中最顶层窗口的位置。

    • 如果窗口没有父窗口，则top是对自身的引用(窗口=== window.top)

空~自由
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用iframe在网页中嵌入其他网页的方法
09-28
主要介绍了使用iframe在网页中嵌入其他网页的方法,需要的朋友可以参考下
window.parent window.top window.parent.location.pathname 没权限
weixin_34072159的博客
03-07 613
跨域问题啊，如果只是测试的话，放到服务器去测试，本地的(http://localhost/)就算是在同一个文件下，都会被认为跨域的。如果不需要支持低版本IE浏览，可以使用postMessage处理这个跨域的东西。不过，这个两个页面都需要做处理的。...
JavaScript:全面解析Ajax跨站数据传输和iframe跨域名js调用
LENEL的砖篮
10-24 8351
关于跨域名问题还是问题么，这方面的解决实践非常多，今天我就旧话重提把我所知道的通过几个应用场景来分别总结一下先说明一点：我说的某某域名在您的控制下的意思是这个域名下的网页由您来负责开发内部的JavaScript场景一：将bbs.xxx.com的页面用iframe嵌入到www.xxx.com的中，如何在iframe内外使用js通信一级域名都是xxx.com 这个域名一定是在您的控制下，所以你只要
近乎完美的简单 JS 跨域解决方式 --window.name
一灯笔记
12-09 1289
当然，“近乎完美”仅仅是个人观点，但如下所述，它确实简单而颇有效益！  一直在寻求一种自己满意的 JS 跨域方式（这里是指任意跨域），曾经了解过：  即时插入 script 元素的方式，会让脚本立即执行，不安全，并且需要与跨域的远端做好约定——比如变量名。细节较为繁琐。写 iframe 的 location.hash 的方式，会导致历史记录的产生，且数据量有限，同时，因为 URL 的内容可
浏览器_跨域问题
qq_43260366的博客
04-02 1213
跨域会报一个固定格式的错误：'ajax请求地址''网页请求地址'
delphi接口带上请求头是什么意思_因为一个跨域请求，我差点丢了饭碗
weixin_39552304的博客
11-23 123
浏览器基本原理我叫小风，是Windows帝国一个普通的上班族。今天，我入职了一家浏览器公司，公司的主营业务是为人类提供Internet上网服务，我的岗位是负责执行JavaScript代码。上午的晨会上，认识了负责网络连接的老白，所有网络请求都得找他帮忙，还有负责存储管理的小黑，什么Cookie，LocalStorage，SessionStorage之类的都归他管。哦，差点忘了，还有一个妹子小雪，她...
iframe,我们来谈一谈
weixin_34342578的博客
02-27 3848
某大咖说: "iframe是能耗最高的一个元素，请尽量减少使用"某大牛说: "iframe安全性太差，请尽量减少使用"...wtf, 你们知不知道你们这样浇灭了多少孩纸学习iframe的热情和决心。 虽然，你们这样说的我竟无法反驳，但是iframe强大功能是不容忽视的。 可以看看各大邮箱网站是否还在使用iframe，查查知乎iframe....
在vue中实现嵌套页面(iframe)
11-19
vue中嵌套iframe,将要嵌套的文件放在static下面。... <...top: -300px;left: 0px;...补充知识：关于VUE嵌套iframe的一系列问题 此文是建立在vue-cli之上 ，当然单写也可以，下文会涉及一些关于cli的知识，
cross-domain:通过三层Iframe嵌套实现JS跨域访问
06-11
使用在iframe中内嵌一个动态生成的指向与父页面同域的iframe实现跨域文件列表A域（父页面）中的文件cross_domain_transfer.html 实现跨域的关键文件，B域要指向的目标跨域跳转页面URL ；Parent.html A域示例页面，...
iframe 跨域访问session
01-28
然而，当涉及到跨域时，`iframe` 遇到的问题之一就是无法正常访问父页面或被嵌入页面的`session`。这是因为浏览器的同源策略（Same-Origin Policy）限制了不同源之间的交互，包括`session`和`cookie`。 同源策略是...
PHP关于IE下的iframe跨域导致session丢失问题解决方法
12-19
此外，描述中还提到这个问题可能与登录页面使用JavaScript的location跳转有关，但未进一步测试和研究。这暗示着，可能在某些情况下，由于JavaScript的限制或者IE对跨域Cookie的处理方式，导致了Session无法正常工作...
关于Iframe如何跨域访问Cookie和Session的解决方法
01-20
系统直接跳转到系统后台首页，后台登录成功后所跳转的URL这里没法指定，控制不了跳转的页面，如果在统一后台里需要链接到这个系统后台的另外一个页面，而非后台默认首页时，也就是将第三方系统后台的菜单功能放到...
关于跨域的一些知识
zheshihuahua的博客
07-14 1181
跨域 简单的一批 不信你点进来看
top.location.href和localtion.href有什么不同
lanchg的博客
07-31 712
top.location.href=”url”          在顶层页面打开url（跳出框架） self.location.href=”url”         仅在本页面打开url地址 　　 parent.location.href=”url” 　    在父窗口打开Url地址 　　 this.location.href=”url” 　　    用法和self的用法一致       ...
浏览器跨域问题解决方案
乡下人
08-06 8443
浏览器跨域问题解决方案 参考： https://developer.yahoo.com/javascript/howto-proxy.html?guccounter=1 http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html 本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： ...
使用iframe框架传值时，子窗口无法直接获得父窗口的参数值
M_none的专栏
05-03 1653
一：问题描述：子窗口无法直接获得父窗口的参数值 二：解决方案： 首页 //写了一个Request["Parms"]获取参数小脚本,关键一 var Request = new Array(); function InitData() { var s = window.location.href; var n = s.indexOf("?")
js iframe 出现跨越问题
会飞的程序猿
09-17 1069
iframe 本来解决跨域问题的，但是使用不当，就会出现自身接口跨域报错 iframe 子页面，检查有没有 window.top 、window.parent 等和父页面关联字段。 如果有，去掉，跨域报错就没了。 原因是，用top，parent 会使当前iframe的域名指向变为父页面域名 ...
一次由iFrame嵌入网页引起的跨域问题解决
AGreatLoser
06-08 7113
B系统正常的登录逻辑是验证账户和密码后，给前端返回Set-Cookie，设置登录态信息，后续无需重复登录。需要注意的是，设置 SameSite=None 的前提是，该页面使用https协议，且 设置 Secure 属性为 True, 如上图红框所示。原来通过iFrame访问B系统页面的时候，浏览器识别到为跨域请求，所以Set-Cookie失效，无法保持登录态。但从A系统页面访问的时候，iFrame中的B系统页面登录失效，一直循环在登录页面。在单独的页面中打开B系统可以正常登录，且持有、保持登录态。
chromedriver-mac-arm64_126.0.6465.0.zip
最新发布
07-31
chromedriver-mac-arm64_126.0.6465.0.zip
nginx 解决嵌套iframe跨域问题
07-27
嵌套iframe跨域问题可以通过利用nginx进行解决。nginx可以作为反向代理来处理跨域请求。具体的解决方法如下： 1. 首先，在nginx的配置文件中添加以下配置： ``` location / { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; if ($request_method = 'OPTIONS') { return 204; } } ``` 这样可以在响应头中添加Access-Control-Allow-Origin字段，允许跨域请求。 2. 然后，将需要跨域的页面嵌套在iframe中，并将iframe的src指向nginx服务器的地址。 通过以上配置，nginx会在响应头中添加Access-Control-Allow-Origin字段，允许跨域请求。这样就可以解决嵌套iframe跨域问题。\[1\]\[3\] #### 引用[.reference_title] - *1* *3* [利用Nginx解决跨域问题](https://blog.csdn.net/Kayson13/article/details/106466606)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Nginx反向代理解决iframe跨域问题](https://blog.csdn.net/banketan1026/article/details/102391169)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值