vue中用iframe嵌套页面，点击返回实现真正的退回上一步功能

vue项目中需要嵌套第三方的页面，但是第三方页面中的网页没有返回按钮，如图所示：此为页面b，页面a为跳到b页面的前一个页面。

点击iframe嵌套页面跳转的第二个页面

要实现不管进入多少层iframe页面，点击回退都直接跳到页面a.
实现：
为了不影响路由判断，使用回退的方法。
首先在进入页面b时，记录一下history.length，并把这个值赋给页面的一个变量：

  data () {return {para:{},htmlStr:'',htmlSrc:'',rlen:history.length,}},mounted () {},methods: {//返回goBack () {let len = this.rlen - history.length - 1;//-1是不进入iframe页面的下级页面直接退出的话，执行后退一步的操作this.$router.go(len);},}

在点击返回按钮时，重新获取一下history.length，并用刚进入b页面记录的值去减去最新的history.length，即可获取到需要回退的步数。

注：history.length:浏览器历史列表中的元素数量

vue中用iframe嵌套页面，点击返回实现真正的退回上一步功能相关推荐

vue中iframe嵌套页面父子组件互相通信
//父传子页面 <iframe id="mainIframe" name="mainIframe" ref="iframe" :src ...
关于vue中iframe嵌套页面的适配（大屏可视化）
this.$nextTick(() => { const iframe = this.$refs.iframeWarp //获取dom const iframed = iframe[0] ifr ...
vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换
引用地址:vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换 - 长空雁叫霜晨月 - 博客园项目预览地址:https://volodya-01.github.io/vue2.0_t ...
TP超链接无法下载问题解决 hrome浏览器默认禁止iframe嵌套页面下载文件
var urlshow="{:U('Grant/download')}&grt_id="+row['grt_id']; let link = document.create ...
实现iframe嵌套页面通信
实现iframe嵌套页面通信在项目中通过iframe标签嵌入其他网页时,该如何iframe页面进行通信呢?小菜鸡在这里简单记录一下~ 1.父组件获取子组件: (注:父组件是当前项目页面,子组件是if ...
h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰
做H5开发,安卓和IOS的兼容问题经常会困扰我们,尤其是跟第三方平台合作,用到iframe嵌入式应用,令很多Web前端开发的童鞋脑壳疼,相信大家也入了不少坑,且踩且珍惜吧,呵呵^_^.今天抽时间整理一 ...
前端Docker部署 https服务以及使用 iframe嵌套页面遇到的问题
中心思想:先部署 http服务,再部署 https服务转发到 http服务上 (如果 http和 https服务部署在同一台服务器上,可共用一个 docker容器同时部署,见 3) 前端Docker微 ...
iframe嵌套页面下载问题
出于沙盒安全性考虑,83版本的chrome浏览器默认禁止了iframe嵌套页面,通过a和window.open,localtion.href点击下载, 为了解决这个问题,可以在父页面的iframe中s ...
关于前端iframe嵌套页面的跳转问题
因工作中遇到的项目,有iframe页面嵌套,遇到了页面跳转的问题,所以记录解决问题的过程关于前端iframe嵌套页面的跳转问题问题: 在A页面使用iframe嵌套了B页面,B页面中做了权限校验,即 ...

vue中用iframe嵌套页面，点击返回实现真正的退回上一步功能

vue中用iframe嵌套页面，点击返回实现真正的退回上一步功能相关推荐

最新文章

热门文章