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

最新推荐文章于 2023-04-14 15:05:22 发布
最新推荐文章于 2023-04-14 15:05:22 发布
阅读量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框架时，在子页面内跳转--＞让父页面跟着一起跳转
m0_55546349的博客
12-08 5425
使用iframe框架时，在子页面内跳转–>让父页面跟着一起跳转 由于开发需要，很多时候需要使用到iframe框架，即子页面，子页面使用是挺方便的，但如果在子页面内需要跳转整个页面时就会出现问题。 比如：如果在页面内判断登录状态时，发现还未登录时需要自动跳转到登录页面。但是会页面嵌套！ 即：登录页面也嵌套在了父级页面中，这就不符合需求了。 解决： 在js中跳转，window.location.href()；这就尴尬了，因为window这种跳转是没有target属性的，这时，你可以使用取个巧，让父页面跟着
子窗口iframe跳转到父窗口
11-30
子窗口iframe提交后跳转到父窗口，总结四种方法。
使用iframe框架时，子页面内跳转整个页面
热门推荐
W_Q_Q_的博客
09-04 1万+
由于开发需要，很多时候需要使用到iframe框架，即子页面，子页面使用是挺方便的，但如果子页面呢需要跳转整个页面呢，比如我就遇到了一个问题，我子页面有个功能需要登 录，所以连接的是登录页面，但登录页面只在子页面中显示，这就显得很不合理了，在这里，我介绍几种方法， 第一种，是比较大众的方法，及子页面内标签的整个页面跳转，只需在 标签中添加"target=_parent"即可。 第二种是在he
iframe重定向让父页面跳转
weixin_30399797的博客
09-05 396
情景描述 我们在使用一些后台程序的html模板（比如H-ui）的时候，这些html前端程序是iframe版的， 也就是说在使用的时候，每当我点击左侧导航栏的一个按钮，在右侧就会弹出一个菜单栏，在显示的地方就会出现一个页面。 我们在使用的时候会遇到这样一个问题： 比如我的session过期了，那么这个时候当我点击页面上摸一个按钮的时候， 我希望这个页面会跳转到登陆界面。 然而事实上它的确跳...
父页面的iframe间相互跳转
Andrew_SJ的博客
04-23 487
如果一个父页面index.html内有iframe，在某一个iframe对应的html文件中要实现跳转到另一个iframe, 并且保持父页面不变。 只需： // 当前页面iframe_1.html // 1. parent.()获取当前iframe页面的父页面index.html // 2. 设置index.html内iframe元素的src属性 parent.$([name='fm']).src = '/iframe_2.html'; ...
iframe中的各种跳转方法（转）
ddzmq5378的博客
02-27 325
一、背景A,B,C,D都是jsp，D是C的iframe，C是B的iframe，B是A的iframe，在D中跳转页面的写法区别如下。 二、JS跳转window.location.href、location.href 本页面跳转，D页面跳转 parent.location.href 上一层页面跳转，C页面跳转 top.location.href 最外层页面跳转，A页面跳转 ...
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); // 表单提交成功后，从服务器...
Android WebView拦截iframe标签内部跳转教程
01-03
最近项目里有个广告位需要动态配置，后台给了一段 html 嵌套iframe标签的代码，需要Android拦截iframe内部的跳转，自己做处理。 比如，下面是一段html代码，嵌套这iframe标签，src就是跳转地址，我现在就要当你点击该网址的时候做拦截，自己做处理而不是跳转。 <html> <iframe src=https://www.jb51.net/ frameborder='0' scrolling='no' width='100%' height='300'> </iframe> </html> oh,我还是第一次知道iframe标签，不过想着应该和普通拦截h5差不多，兴
iframe页面控制父页面跳转
weixin_30677475的博客
01-17 225
<script> window.onload=function(){ window.location.href="http://www.baidu.com"; window.parent.location.href="http://www.baidu.com"; } </script> 转载于:https://www.cnblogs.com/huaci/p/...
iframe跳转直接让主界面跳转_网站外链 | 添加Go界面跳转
weixin_39764494的博客
11-22 1044
介绍一个Go界面跳转网址外链功能修改自极梦小屋(jimeng365.cn)原演示效果https://www.jimeng365.cn/142.html修改后配置方法：1、新建文件go.php，添加如下代码然后将文件复制到网站根目录...
子iframe通过a标签跳转到父页面_记一次：iframe嵌套网页，利用window.postMessage()实现子父窗口相互传值（转）...
weixin_33712536的博客
02-11 390
场景需要：B生成的DOM，获取其属性，传值到AA监听事件，获取监听的属性，传到B正文利用window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议(通常为https)，端口号(443为https的默认值)，以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。windo...
HTML使用iframe元素实现页面内容的跳转功能
zxh996的博客
07-01 4629
HTML使用iframe元素实现页面内容的跳转功能前言一、iframe是什么？二、iframe的使用1.主页面内容代码2.内容页面代码总结 前言 在前端的学习中，不免有一些页面的跳转功能的实现，而身为初学者的我们没有过快的接触JavaScript，无法实现动态的页面跳转，所以我在这里使用了一种HTML的元素实现页面元素跳转功能，仅供参考学习。 一、iframe是什么？ irame是 HTML5 中的新增加的属性，所以在HTML5之前的版本是不支持的，作用是文档中的文档，或者浮动的框架。iframe元素会
JS页面跳转和js对iframe进行页面跳转、刷新
sfkong31893189的博客
04-17 637
  一、JS方式的页面跳转1.window.location.href方式     &lt;script language="javascript" type="text/javascript"&gt;            window.location.href="http://www.dayanmei.com/";     &lt;/script&gt; 2.window.nav...
iframe内置页面之间跳转
张大晴的博客
03-10 1253
用window.location.href = 'url地址' 即可 iframe上层父元素则用 window.parent.document -- 得iframe父级元素的document对象
解决iframe重定向让父级页面跳转或子页面控制父级页面跳转
CaseyWei
07-09 3253
原文：http://www.jb51.net/article/40583.htm 有内嵌iframe的页面，当session过期时，点击连接重定向后的跳转会在iframe中跳转，在登录页面中加入下面的代码，就会在最外层页面跳转 原文：http://www.cnblogs.com/JemBai/archive/2011/10/09/2203429.html <script languag...
嵌在iframe里的vue项目 怎么触发父页面的方法？
04-14 527
嵌在iframe里的vue项目 怎么触发父页面的方法？
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、付费专栏及课程。

余额充值