iframe内部跳转让父级页面跳转

最新推荐文章于 2023-08-18 10:28:51 发布
最新推荐文章于 2023-08-18 10:28:51 发布
阅读量3.3k 收藏 9
点赞数 8
文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44727080/article/details/104600622
版权

前言：

       在使用iframe的时候，会出现跳转一直在iframe里面的情况，很多时候我们需要跳出iframe然后去他的父级跳转，这种情况下应该怎么做呢，我们在这里说一说它的方法.

首先是我们正常的跳转：（在iframe不行，内部来跳，类型a标签的href）

window.location.href

其次：我们来说下iframe，父级跳转方法：

parent.location.href

最后：我们说下最外层跳转方法：

top.location.href

 

妍崽崽@
关注
  • 8
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
子窗口iframe跳转到父窗口
11-30
子窗口iframe提交后跳转到父窗口，总结四种方法。
iframe重定向让父页面跳转
weixin_30399797的博客
09-05 404
情景描述 我们在使用一些后台程序的html模板（比如H-ui）的时候，这些html前端程序是iframe版的， 也就是说在使用的时候，每当我点击左侧导航栏的一个按钮，在右侧就会弹出一个菜单栏，在显示的地方就会出现一个页面。 我们在使用的时候会遇到这样一个问题： 比如我的session过期了，那么这个时候当我点击页面上摸一个按钮的时候， 我希望这个页面会跳转到登陆界面。 然而事实上它的确跳...
使用iframe框架时，在子页面内跳转--＞让父页面跟着一起跳转
m0_55546349的博客
12-08 5444
使用iframe框架时，在子页面内跳转–>让父页面跟着一起跳转 由于开发需要，很多时候需要使用到iframe框架，即子页面，子页面使用是挺方便的，但如果在子页面内需要跳转整个页面时就会出现问题。 比如：如果在页面内判断登录状态时，发现还未登录时需要自动跳转到登录页面。但是会页面嵌套！ 即：登录页面也嵌套在了父级页面中，这就不符合需求了。 解决： 在js中跳转，window.location.href()；这就尴尬了，因为window这种跳转是没有target属性的，这时，你可以使用取个巧，让父页面跟着
＜iframe＞框架 ，实现页面的相互跳转
weixin_73705609的博客
10-11 2762
【代码】框架 ，实现页面的相互跳转。
HTML使用iframe元素实现页面内容的跳转功能
zxh996的博客
07-01 4640
HTML使用iframe元素实现页面内容的跳转功能前言一、iframe是什么？二、iframe的使用1.主页面内容代码2.内容页面代码总结 前言 在前端的学习中，不免有一些页面的跳转功能的实现，而身为初学者的我们没有过快的接触JavaScript，无法实现动态的页面跳转，所以我在这里使用了一种HTML的元素实现页面元素跳转功能，仅供参考学习。 一、iframe是什么？ irame是 HTML5 中的新增加的属性，所以在HTML5之前的版本是不支持的，作用是文档中的文档，或者浮动的框架。iframe元素会
框架iframe的界面跳转的运用
最新发布
梦凝哲雪
08-18 4983
在上述代码中，假设iframe的id属性为"myIframe"，并且要跳转到的子界面的URL是"subpage.html"。通过修改iframe的src属性，可以改变嵌入的网页内容，从而实现跳转到子界面。由于浏览器的同源策略限制，如果iframe子界面和外部界面的域名不同，需进行跨域配置才可访问外部界面。这些方法可以在iframe子界面中的JavaScript代码中使用，以实现跳转到外部界面的操作。此时只能在iframe框架的主界面切换 而 无法跳转到iframe之外的界面。来修改外部界面的URL。
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
10-27
这里的"parent"对象代表当前iframe的直接父级iframe或顶级页面的窗口对象。通过设置父页面的location.href属性，可以实现从子页面到父页面的跳转。 3. 最外层页面跳转：当页面是嵌套在多个iframe中时，最外层页面...
后台管理禁止iframe刷新返回首页
09-01
然而，`iframe`的使用有时也会带来一些问题，比如在后台管理系统中，当用户在某个子页面（如二级菜单页面）操作时，如果`iframe`刷新，可能会导致页面跳转回首页，这显然不是用户期望的行为。针对这个问题，我们需要...
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
12-03
而刷新上级页面（如果当前页面在框架或iframe中）则可以通过`window.parent`属性来访问父级窗口，并结合`document.location.reload()`执行刷新操作。例如，`window.parent.main.document.location.reload()`会刷新名...
layui框架中layer父子页面交互的方法分析
11-27
// 如果指定了iframe，则在改frame中跳转 } else { top_iframe = top.getActiveTab().attr("name"); // 获取当前active的tab的iframe } inputForm.attr("target", top_iframe); // 表单提交成功后，从服务器...
菜单内嵌的iframe控制外层页面跳转
qq_40178497的博客
04-16 2643
需求： 菜单框架和菜单内容是不同组件开发，通过iframe联动的，现在需要由一个菜单跳转到另一个菜单，实现左侧菜单和上方Tab标签都跟随变化 菜单内容若是和菜单框架使用同一组件，那么自然有相应的文档，菜单跳转非常简单，但内嵌不同开发组件或者页面要实现跳转，提供菜单框架的组件不能使用 解决方案： 在内嵌的iframe中去控制外层的页面网址，实现菜单跳转 在内嵌iframe的js中，通过window.open("url","_top")或者通过top.location.href=url来实现跳转，url为需要
iframe标签中的页面子页面的链接跳转新页面
DeadlyBlack的博客
07-28 5312
iframe；router；页面跳转；父页面；子页面
iframe实现整个页面的跳转
qq_41494464的博客
12-03 2120
在使用iframe的时候，希望在框架内进行操作之后实现整个页面的刷新，起初使用window.location.reload()方法 if(res.success){ window.location.reload(); //只是单层刷新 }else{ alert(res.Msg); } 但是发现只是iframe框架做了跳转，而外层页面没有刷新，并没有实现想要的功能，因此我们需要操作上层页面,更...
JS如何打开新的页面、服务中使用iframe如何改变iframe的路径、iframe页面如何让整个父页面跳转、window.open()方法详解
马脸男的博客
06-13 3459
方法是 JavaScript 中的一个内置方法，用于在浏览器中打开一个新的窗口或标签页。需要注意的是，由于弹出窗口的滥用已经成为了一个安全问题，现代浏览器通常会默认阻止 window.open() 方法的调用，除非是在用户的交互下触发的。因此，在实际的开发中，我们需要谨慎使用这个方法，避免被浏览器误认为是恶意行为。
JS页面跳转和js对iframe进行页面跳转、刷新
sfkong31893189的博客
04-17 640
  一、JS方式的页面跳转1.window.location.href方式     <script language="javascript" type="text/javascript">            window.location.href="http://www.dayanmei.com/";     </script> 2.window.nav...
关于iframe中<a>标签的跳转问题
YuanStarForever的专栏
06-30 4763
在iframe中使用a标签进行跳转，默认是在iframe中进行页面的跳转，如果使用target=“_parent”则可以在父页面进行跳转，这个是基础问题，但是没记起来，这里记录一下，防止以后忘记。
父窗口获取不了iframe中的元素及a标签页面整个刷新
seiEight的博客
06-09 894
这次在学习jQuery时，页面的头和尾用了iframe标签嵌套页面，但在操作iframe中标签时碰到两个问题，一是a标签的跳转在局部刷新，二是获取不到iframe中的元素。 一 需要判断一下当前是不是最顶层的窗口，然后刷新最顶层的window，添加以下代码 if (window != top){ top.location.href = "https://www.baidu.com/...
Layui实现页面内部的iframe跳转
07-28
要在页面内部使用 iframe 进行跳转，可以使用 Layui 提供的 `element.tabAdd` 和 `element.tabChange` 方法来实现。 首先，在 HTML 中定义一个包含 iframe 的容器，例如： ```html <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <iframe src="page1.html" frameborder="0" class="layui-tab-content-item"></iframe> </div> </div> ``` 然后，在 JavaScript 中使用 `element.tabAdd` 方法添加新的选项卡，并使用 `element.tabChange` 方法切换到对应的选项卡，实现 iframe 的跳转。例如： ```javascript layui.use('element', function(){ var element = layui.element; // 添加新的选项卡 element.tabAdd('demo', { title: '页面2', content: '<iframe src="page2.html" frameborder="0" class="layui-tab-content-item"></iframe>', id: 2 // 需要指定一个唯一的 id }); // 切换到对应的选项卡 element.tabChange('demo', 2); // 切换到页面2 }); ``` 注意，`element.tabAdd` 方法需要传入一个唯一的 id，用于标识选项卡，而 `element.tabChange` 方法则可以传入选项卡的 id 或标题（title）来切换。 以上就是使用 Layui 实现页面内部的 iframe 跳转的基本步骤。你可以根据实际需求进行调整和扩展。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值