vue中用iframe嵌套页面（跳转第三方），点击返回实现真正的退回上一步功能

最新推荐文章于 2024-04-25 14:07:28 发布
最新推荐文章于 2024-04-25 14:07:28 发布
阅读量4.6k 收藏 2
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43459224/article/details/104234901
版权

在这里插入图片描述

<iframe :src="`http:*****`" frameborder="0" scrolling="auto" width="100%" height="100%" style="overflow-y:scroll;"></iframe>
avoidaily
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
在vue中实现嵌套页面(iframe)
11-19
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”...
Vue页面跳转动画效果的实现方法
10-17
百度了好久都没办法实现vue中一个页面跳到另一个页面，甚至到google上搜索也是没办法的，最终还是找了高人亲自指导，所以下面这篇文章主要给大家介绍了关于Vue页面跳转动画效果的实现方法，需要的朋友可以参考下
解决vue前端iframe框架嵌套第三方网址拒绝访问
HD243608836的博客
04-16 2810
Refused to display '嵌套的网址' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
iframe 实现内部页面返回上一级
路上
10-15 2万+
1.问题所在 后台采用iframe的方式去写的 当用户点击浏览器的返回上一级就会让页面回到登录页面。 2.想要实现效果 当用户点击上一级的时候只会让iframe里面的内容去返回上一级而不是整个iframe返回 3解决问题方案 3.1第一种解决方案 首先我想到的是给代码加一个返回上一级按钮轻松实现 代码如下 &lt;span onclick="back()"&gt;返回上一级&...
vue项目中显示第三方外部链接的页面
最新发布
韩旭不会敲代码吧的博客
04-25 2429
vue项目中显示第三方外部链接的页面
vue中用iframe嵌套页面，点击返回实现真正的退回上一步功能
zuo-yiran的博客
06-27 1万+
vue项目中需要嵌套第三方的页面，但是第三方页面中的网页没有返回按钮，如图所示：此为页面b，页面a为跳到b页面的前一个页面。 点击iframe嵌套页面跳转的第二个页面 要实现不管进入多少层iframe页面，点击回退都直接跳到页面a. 实现： 为了不影响路由判断，使用回退的方法。 首先在进入页面b时，记录一下history.length，并把这个值赋给页面的一个变量： data () { ...
在Vue里面嵌套Iframe页面教程分享 解决切换页面后没有办法保留住内容的问题
csdndddsd的博客
11-17 3437
在vue的router-view同级别添加了一个iframeTemp组件，其实就是一个elementUI的tab组件，然后把tab组件的头的样式隐藏在菜单栏的下面。为了解决切换了vue的路由，然后再切回http的页面，iframe中的src属性的页面就会从新刷新，没有办法保留住内容的问题。之后的iframe组件的显示隐藏和tab切换，都是通用vuex和bus事件广播实现的。在这个功能的实现中我们用到了bus事件总线的广播和监听。还要添加一个没用的路由，因为我们的锚记还要发生变化。
vue使用iframe切换src路径时不重新刷新
Qiuqianye的博客
03-17 1775
因为使用docment去操作iframe的很麻烦，还有跨域的问题，所以使用v-if的方式重新渲染页面。有一个下拉框联动着iframe的src，下拉框每切换一下，iframe就重新刷新一下。如果只是用v-model去绑定iframe的src，手动修改是无法完成重新请求刷新的。v-if做一个延迟加载就可以啦。
vue中切换tab不会刷新页面数据
qq_41975388的博客
07-03 3967
vue中切换tab不会刷新页面数据
Vue进阶（六十四）：iframe更改src后页面未刷新问题解决
IT全栈 华强工作室
07-23 2万+
document.getElementById(iframe的id).contentWindow.location.reload(true); 在更改iframe src属性值之前加上这一句即可。
Vue中对iframe实现keep alive无刷新的方法
qq_20236937的博客
11-14 2936
Vue中对iframe实现keep alive无刷新的方法
2.（vue3.x+vite）调用iframe的方法（vue编码）.rar
09-22
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725
vue页面跳转后返回原页面初始位置方法
11-28
在Vue.js应用中，当用户从一个页面跳转到另一个页面，然后按返回按钮返回原始页面时，通常希望用户能够回到他们离开时的位置。要实现这个功能，我们可以利用Vue的生命周期钩子、Vuex状态管理器以及Vue Router的特性...
vue给iframe页面添加点击事件，刷新用户无操作时自动退出时间
weixin_48512601的博客
04-18 2229
但是对于iframe 引入的外部页面，再点击或者操作页面事件时，却获取不到监听，此时就需要对iframe页面做自定义事件处理。一般是对 window.document 添加 onmousedown，来刷新时间。前提: 登录类的页面，用户在登录进入系统后，如果长时间无操作，都会有自动退出功能。项目中使用的是监听页面是否被点击来刷新用户无操作是自动退出的时长。
tab切换代码简单写法
weixin_34144848的博客
12-27 309
为什么80%的码农都做不了架构师？>>> ...
使用iframe标签来显示后台返回的内容
暖一杯茶的博客
01-11 2092
HTML标签 <iframe id="iframe" frameborder="0" // 0不显示边框，1显示边框 scrolling="no" //关闭滑动 > ></iframe> JS代码中 infoLawContent({ id: this.id }).then(res => { if (res.code == "1000") { this.info = res.data[0]; var iframe = document.
在vue中嵌入iframe页面
热门推荐
u010227042的博客
08-21 2万+
一、嵌入iframe页面业务场景 项目是一个物流运营平台的管理系统，系统中对接了第三方的客服系统。因此这里需要在自己的页面中嵌入三方客服聊天的页面（这里对接了智齿）。ps：别问我为什么不自己写一个聊天的功能，问就是不知道。 二、iframe是什么 ifram标签规定了一个内联框架，让我们有可能在当前的HTML文档中嵌入另外一个文档，目前所有的主流浏览器都支持iframe标签，当然为了以防万一你可以在iframe标签中写入提示文本，以提示用户当前使用的浏览器不支持iframe。 <iframe
【前端】实现Vue组件页面跳转的多种方式
码农研究僧的博客
02-09 1万+
通过某个Button让页面多种方式跳转
vue 中使用 iframe 嵌入网页，页面可自适应
beijixing333y的博客
06-23 1万+
vue 中使用 iframe 嵌入网页
vue中iframe嵌套页面跳转
04-04
在Vue中嵌套iframe页面跳转，可以使用iframe的window对象的location属性进行页面跳转。 例如，在Vue组件中嵌套一个iframe： ``` <template> <div> <iframe ref="myIframe" src="http://www.example.com"></iframe> </div> </template> ``` 然后，在Vue组件的方法中使用iframe的window对象的location属性进行页面跳转： ``` <script> export default { methods: { goToPage() { this.$refs.myIframe.contentWindow.location.href = 'http://www.example.com/newpage'; } } } </script> ``` 在这个例子中，当调用goToPage方法时，会将iframe中的页面跳转到http://www.example.com/newpage。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值