菜单内嵌的iframe控制外层页面跳转

最新推荐文章于 2022-11-03 17:58:59 发布
最新推荐文章于 2022-11-03 17:58:59 发布
阅读量2.5k 收藏 6
点赞数 1
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40178497/article/details/124208186
版权

需求： 菜单框架和菜单内容是不同组件开发，通过iframe联动的，现在需要由一个菜单跳转到另一个菜单，实现左侧菜单和上方Tab标签都跟随变化
在这里插入图片描述

菜单内容若是和菜单框架使用同一组件，那么自然有相应的文档，菜单跳转非常简单，但内嵌不同开发组件或者页面要实现跳转，提供菜单框架的组件不能使用

解决方案： 在内嵌的iframe中去控制外层的页面网址，实现菜单跳转
在内嵌iframe的js中，通过window.open("url","_top")或者通过top.location.href=url来实现跳转，url为需要跳转的菜单的网址
当有多层iframe嵌套时，可以使用window.parent.location.href=url来控制父页面

qq_40178497
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe中的各种跳转方法
qq_44884300的博客
04-27 5838
iframe中的各种跳转方法
iframe内部跳转让父级页面跳转
weixin_44727080的博客
03-01 3218
前言： 在使用iframe的时候，会出现跳转一直在iframe里面的情况，很多时候我们需要跳出iframe然后去他的父级跳转，这种情况下应该怎么做呢，我们在这里说一说它的方法. 首先是我们正常的跳转：（在iframe不行，内部来跳，类型a标签的href） window.location.href 其次：我们来说下iframe，父级跳转方法： parent.locatio...
ifream标签  动态加载子页面 地址栏变化
weixin_43193729的博客
11-07 251
ifream标签 动态加载子页面 地址栏变化 这个问题是今天发现的 因为seo需要单独链接来推广页面 不能是只能进主页面 因为我使用的是ifream标签 所以短板出来了 ifream动态加载页面 这些jQuery很容易实现 但是地址栏 是不会像A标签那样 在后面加 *.jsp这样 一旦加了 就直接进子页面了 父页面的就不会有 这个问题困扰了我一上午 中午看完电影 突发奇想...
防止被IFRAME嵌套并自动跳到首页代…
php菜鸟技术天地
06-02 1153
if(self!=top) top.location=self.location;
使用iframe标签时，如何阻止嵌入的页面跳转(Vue、HTML 均可使用)
qq_16733389的博客
04-19 3096
<iframe :src="pannelInfo.pannelURL" id="web" frameborder="0" class="web-frame" security="restricted" sandbox=""></iframe> security是js 的属性，后面的sandbox是h5的属性 值 描述 " " 应用以下所有的限制。 allow-same-origin 允许 iframe 内容被视为...
iframe阻止跳到新页面
weixin_46176363的博客
12-03 1102
sandbox="allow-same-origin allow-scripts allow-forms"
HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法
09-28
就想弄一个winform结合html5的一个小东西，突有心血来潮，想在里面嵌套一个微信网页版，下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法，一起看看吧
jQuery内嵌iframe导航菜单
06-24
本篇文章将详细讲解如何利用jQuery实现一个内嵌iframe的导航菜单，以及相关的设计与实现技巧。 一、jQuery 导航菜单基础 1. jQuery的选择器：jQuery 提供了丰富的选择器，如 ID 选择器 (#id)，类选择器 (.class) 和...
使用iframe window的scroll方法控制iframe页面滚动
09-04
在页面中如何控制内嵌的iframe滚动呢？方法是使用iframe window的scroll方法，大家可以参考下面的示例
jQuery内嵌iframe导航菜单.zip
10-08
内嵌iframe导航菜单的核心在于，通过jQuery来控制iframe的源（src）属性，根据用户在导航菜单中的选择加载不同的页面内容。这使得我们可以在不刷新整个页面的情况下，快速切换显示的内容，提升用户体验。以下是一般...
防止iframe连接重定向到父级页面
小青蛙
09-26 7726
<iframe src="b.html" sandbox="allow-forms allow-scripts allow-same-origin"> </iframe>
禁止iframe内的页面跳转
kerryqpw的博客
11-08 5396
禁止iframe内的页面跳转         iframe里如何禁止页面跳转。 &lt;iframe name="son" src="https://www.hao123.com" width="100%" height="100%" scrolling="auto" security="restricted" sandbox="allow-top-navigat
使用iframe框架后的子页面A跳转子页面B的问题
Jing0921的博客
02-20 566
在子页面A的js文件中写以下代码 $('iframe', window.parent.document).attr("src", "子页面B相对主页面的路径")
iframe链接跳转问题
WeeCR7的博客
08-06 293
top.location="login.html"; top.location可以使跳转页面不在iframe中显示，而跳转到另一个页面
iframe嵌入的页面只能在iframe中跳转显示问题以及高度自适应内容问题
m0_53016870的博客
08-13 1643
iframe嵌入的页面只能在iframe中跳转显示问题以及高度自适应内容问题，使用target属性。
jquery操作iframe的方法：父页面和子页面相互操作（九种情况）
热门推荐
xiaouncle的博客
05-23 1万+
现实开发中难免会遇到子页面、父页面相互操作的情况，由于时不时地会遇到几次（不是一次），所以就整理了一下父子页面相互相互调用常见的九种情况，作为自己的备忘录，同时也希望对大家有帮助。 一、子页面C1操作父页面P（下述三个方法写在子页面C1中） //获取父页面P中控件的值, btnParent1是子页面C1中的按钮 $("#btnParent1").click(function () { ...
html页面用iframe引入公共导航跳转子页面内容不显示或显示不全的问题
Yana5mu的博客
06-04 1564
html页面用iframe引入公共导航跳转子页面内容不显示或显示不全的问题 今天写页面有好几个页面要用一样的导航栏，所以就写了公共的head.html页面。但是发现用jQuery的load方法引入的时候总是报跨域问题，jQuery我是cdn引入的。懒得解决跨域和下载jQuery。便用了iframe引入。发现会出现一个问题，那就是导航栏点击跳转子页面他的页面会放在iframe的盒子里。 这个问题用一行代码就可以解决，给a标签加一个target属性 target="_parent" 看下我的代码 he
JQuery使用iframe 子页面查找父页面元素，及触发父页面事件
m0_50953782的博客
11-03 956
子页面查找父页面元素$('#id',window.parent.document)子页面触发父页面事件。
父窗口控制iframe窗口跳转+子窗口控制iframe跳转
weixin_42935688的博客
05-29 2138
//父窗口控制iframe窗口跳转 function iframehref(obj){ url = $(obj).attr('value'); $('iframe').attr('src',url + '?_d=' + Math.random()); } //子窗口控制iframe跳转 function chirdeniframehref(obj){ url = $(ob...
iframe页面内嵌跳转vue
最新发布
02-24
在iframe页面内嵌跳转Vue，可以通过以下步骤实现： 1. 首先，在父页面中引入Vue.js和Vue Router，并创建一个Vue实例。 2. 在父页面中创建一个iframe元素，并设置src属性为要内嵌的子页面的URL。 3. 在子页面中同样引入Vue.js和Vue Router，并创建一个Vue实例。 4. 在子页面的Vue实例中配置路由，定义路由表和对应的组件。 5. 在子页面的Vue实例中使用<router-view>标签来显示路由对应的组件。 6. 在父页面的Vue实例中使用Vue Router的push方法来进行内嵌跳转，即改变iframe的src属性为目标路由的URL。 下面是一个简单的示例代码： 父页面（index.html）： ```html <!DOCTYPE html> <html> <head> <title>Parent Page</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <iframe :src="iframeSrc"></iframe> <button @click="navigateToChildPage">Go to Child Page</button> </div> <script> const router = new VueRouter({ routes: [ { path: '/child', component: ChildPage } ] }); const app = new Vue({ el: '#app', data: { iframeSrc: 'child.html' }, methods: { navigateToChildPage() { this.iframeSrc = '/child'; } }, router }); </script> </body> </html> ``` 子页面（child.html）： ```html <!DOCTYPE html> <html> <head> <title>Child Page</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-view></router-view> </div> <script> const ChildPage = { template: '<div>Child Page Content</div>' }; const router = new VueRouter({ routes: [ { path: '/', component: ChildPage } ] }); const app = new Vue({ el: '#app', router }); </script> </body> </html> ``` 在这个示例中，父页面中的按钮点击事件会触发父页面的Vue实例中的navigateToChildPage方法，该方法会改变iframe的src属性为子页面的URL，从而实现内嵌跳转。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值