美文网首页vue-router二级路由Vue.js开发技巧Vue.js专区
解决 vue-router 内嵌 iframe，导致 go(n)

解决 vue-router 内嵌 iframe，导致 go(n)

作者: 於風聽語 | 来源:发表于2017-12-04 17:36 被阅读197次

问题描述

业务需求，需要内嵌 iframe 预览一些信息，选中某些，则替换 iframe 的 src。变更 2 次后，发现 go(-1)回退异常，变成 iframe 内容回退了。

复现链接：http://jsbin.com/hikorawipa/edit?html,output

问题关键就是：

  • 更改 iframe 的 src 超过两次，并加载完成

问题结果就是：

  • go(-1) 会先回退 iframe 的内容

解决方式

第一反应，这特么是 bug 啊，于是给 vue-router 提了个 issue。
其实搜索发现，之前也有人提过，只是提的不规范直接被 closed 。
等了两天人家回复，这不是 bug ，这是浏览器特性使然...卧槽，好尴尬 = =|||

  • html: 
    <iframe ref="iframe"></iframe>
  • js 
    set(src) {
  this.$refs.iframe.contentWindow.location.replace(src)
}

总结

感觉就是别人帮我解决了一个属于我项目的 bug，~~///(^v^)\~~

参考

—— 2017/12/04 By Live， cloudy.

相关文章

  • 解决 vue-router 内嵌 iframe，导致 go(n)

    问题描述 业务需求，需要内嵌 iframe 预览一些信息，选中某些，则替换 iframe 的 src。变更 2 次...

  • ios App内嵌网页如果是跳转外链如何返回

    可以考虑用iframe内嵌外链Url解决，然后页面上可以加我们的返回按钮

  • PHP从入门到精通，016第二章HTML-HTM的核心标记之内嵌

    二、HTML的核心标记 （十五）、内嵌框架 语法： 常用...

  • vue嵌套iframe问题总结

    router.go() 主要是更改iframe中src值后导致的路由跳转混乱，多次更改iframe的src属性后，...

  • Iframe内嵌

    一 嵌入方 1.1. 嵌入方式 1.2. 接收消息 二 被嵌入方 2.1.发送消息

  • vue-router内嵌iframe页面，回退异常

    问题描述：在vue页面内嵌了iframe，通过$router.back()回退异常 问题分析： 使用vue-rou...

  • 关于HTML的几个标签

    iframe标签 iframe标签会在当前页面内嵌套一个页面，这个页面可以通过CSS来控制大小。 iframe标签...

  • Iframe内嵌框架

    1.