vue3中使用 iframe 查看pdf 影响路由跳转问题

已于 2022-06-09 16:54:00 修改
阅读量792 收藏 3
点赞数 1
文章标签： webview javascript vue.js
于 2022-06-09 15:34:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JiaZhenDu/article/details/125204340
版权

开始一切正常，，直到测试给我提了bug ，在查看pdf后，点后台系统的面包屑返回时 ，要多点一次，有时需要点几次才能返回（摊 手）

解决方法：

  <iframe class="pdf_iframe" :src="videoUrl" :key="videoUrl"></iframe>

是的 就是加一个key 完美解决。。。记录一下以免下次遇到嘻嘻

万物皆可狗
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在vue中实现嵌套页面(iframe)
11-19
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”...
解决vue多个路由共用一个页面的问题
08-27
//其实还有一个next参数的，这个参数是控制路由是否跳转的，如果没写，可以不用写next()来代表允许路由跳转，如果写了就必须写next(),否则路由是不会生效的。 } } ``` 在上面的代码中，我们使用 watch 监听 $route...
App端vue使用iframe标签实现Android和iOS预览PDF文件
m0_53756162的博客
12-30 4281
解决iOS和Android查看PDF文件
前端H5页面 iframe内置pdf 无法全部展示pdf的内容，并且苹果手机无法下滑
weixin_61843526的博客
03-01 1071
iframe的标签的height 不能超出屏幕。否则，苹果手机还是无法下滑。影响到下面的签名和流程的展示。iframe 内置pdf文件 打开后 由于pdf下面还有盒子需要进行内容展示，pdf文件无法铺平及展示。此问题欢迎大佬们说出自己的看法。最后使用这个办法解决。
vue3项目中修改Iframe引入内容的css样式
zhang_zan
05-16 972
vue3中修改iframe中css样式
vue中使用iframe如何不影响路由
qq_22936647的博客
08-17 1473
this.$refs.ifr.contentWindow.location.replace('http://baidu.com')
如何阻止 iframe里引用的网页自动跳转--
码农
07-05 5144
来自：http://www.wumii.com/item/bKTaIuiU 今天做了个网页，要在网页里设置一个iframe，然后套用其他的网站。使用http://luanqi-cat.blogbus.com 这个网址的时候，出现了莫名其妙的问题，我的网页居然会强制自动跳转到这个网页上。搜索了一番，才知道原来这个网页用了如下的一段代码： if (top.location != s
使用iframe展示pdf
lucky_yaya_chen的博客
10-21 3118
代码如下： <iframe src={`${pdfUrl}#page=${pageNumber}&toolbar=0`} frameBorder="0" style={{width: '100%', height: '100%'}} /> } pdfUrl：pdf路径 toolbar=0：隐藏下载、打印等功能 page={page}：可以直接跳转到指定页面
vue 使用iframe展示pdf文件
Tttrycatch的博客
08-17 4682
iframe中下载，pdf文件所有预览，旋转，查看第几页什么的都有，不用自己去写，简单而又给力呀！
vue3室友iframe实现pdf弹窗预览
qq_46617584的博客
09-05 538
【代码】vue3室友iframe实现pdf弹窗预览。
详解vue路由篇(动态路由、路由嵌套)
12-08
在 Vue 中，`vue-router` 是官方提供的路由管理器，它使得单页面应用（SPA）能够根据 URL 地址切换不同的视图。路由的主要职责是根据 URL 映射到相应的组件，从而实现页面间的导航。 一、基础路由 创建 Vue 项目时...
vue下iframe标签页,切换标签页,iframe不重载
12-05
vue项目中一个模板组件，不同iframe的src地址，对应不同的路由，不同标签页，且切换标签页不重载。这种客户的要求是特例在网上没有，所以纯自行手码。由于项目在vuex保存了标签页，所以初次进入该组件时，调用了一次...
vue3 实现预览pdf的几种方式（vue3-pdf, iframe流展示，vue-office/pdf）
热门推荐
dj7858177的博客
07-20 1万+
要实现菜单（二级）绑定文件，并进行预览（点击菜单即触发），支持文件上传下载（绑定菜单）,文件以byte[]形式保存到数据库（至于为什么不用文件存储系统，因为这是领导定的 =，= 而且这个功能比较小，数据也不多，成本有限），同时，要解析pdf文件里的内容（固定模板），抓取部门段落信息单独保存；但是vue3-pdf通病，默认只展示第一页，所以需要获取页数，来通过v-for来把所有页都展示出来（如果页数多，再考虑做翻页操。vue3-pdf(因为是要作展示用，而且文档不是很多页，因此不考虑加入上下翻页，全展示)
项目中使用iframe引入html 解决路由错乱问题以及父子组件传值调用方法
夜空孤狼啸的博客
01-11 755
#微前端【代码】项目中使用firame引入html 解决路由错乱问题。在项目中使用firame引入html，引入的html中有路由跳转，当点击html页面中的路由跳转时，浏览器history会记录次路由，当在引入iframe返回上一级的页面中使用 router.go(-1)就会返回iframe中距离的路由，这样不符合逻辑解决方案如下： 主要是由于浏览器history记录了iframe嵌入页面的路由信息，这个信息不论是iframe内的地址跳转，还是iframe src的切换，都会被记录，下面给出解决方案
实现一个框架，利用iframe跳转
dengdengchen的博客
09-12 501
&lt;style&gt;         ul li {             list-style: none ;         }         .header ul li {             float: left ;         }         .header ul li.first {             margin-left: 30px ;       ...
iframe页面点击操作总是跳到顶部的问题
爱米酱的博客
03-03 2498
在iframe内加载的表中，操作下的按钮用a标签布局，但是会出现一个非常不好的体验，就是当页面有滚动条的时候，点击a标签，列表会自动滚动到顶部。 原因： 应该是浏览器会把 "#" 当作是一种页面跳转的口令，接到这个口令就会把页面滚动到原始位置。 为什么要使用href=”javascript:void(0);” href=”javascript:void(0);”这个的含义是，让超链接去执行...
解决iframe作为子窗口，刷新后页面跳转回默认首页的问题
奔跑的坏蜗牛
08-15 5667
这个问题真的是让我难受，从写php到thinkphp我用过了好几个后台框架。最后还是决定用花了几百大洋的H+。每个人都有自己的偏好，习惯用layui，vue的可能不太喜欢这个。我这人是心血来潮想用那个就把那个搬出来用，想用layui了就把它套进去，想用vue就把它也按进去。这个框架我个人比较喜欢，但是也有它的问题，就是 iframe作为子窗口，刷新后页面跳转回默认首页 这个问题在我之前几个项目...
旧式iframe跳转出现首页处理
啪嗒啪嗒的迈着步子
03-10 590
<br />使用拦截器做权限拦截时 iFrame显示首页而不跳转<br /> <br />在登录页面js里面加入，使其跳转 <br /> <br /> // 不是top时候，只是在iframe里面的时候 if(window.self != window.top){ // 跳转到首页 window.top.location = window.self.location; }<br /> 
vue移动端预览pdf功能（可以多页）以及第三方电子签章不能正常展示解决方案（多种）
qq_39584800的博客
02-13 1万+
vue移动端预览pdf功能（可以多页）以及第三方电子签章不能正常展示解决方案（多种） 随着网络的发展，PC端的网站已不能满足人们的需求，人们更喜欢采用移动端进行业务操作。最近公司要求把PC端网站的订单合同签署功能移植到微信端，而不再局限于PC端操作。 对于这样的要求，我们需要了解的是订单合同，协议书之类的一般都属于不可以任意修改的文件（PDF），这样的文件，现在的浏览器基本都支持直接访问的。但是遗...
Vue3使用路由跳转
最新发布
06-20
以下是如何在Vue3项目中使用路由跳转的基本步骤： 1. **安装Vue Router**： 首先，在项目中安装Vue Router，可以通过npm或yarn进行安装： ```bash npm install vue-router # 或者 yarn add vue-router ``` 2...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值