vue使用iframe踩坑

最新推荐文章于 2024-05-21 18:13:33 发布
最新推荐文章于 2024-05-21 18:13:33 发布
阅读量1.2k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43227958/article/details/103897694
版权

需求:通过iframe写epub阅读器

由于src需要加密，所以在src拼接的时候直接调用函数获取参数

BUG：每次页面一动就会重新获取加载一次iframe，导致页面晃动

解决方案：把方法值赋值给变量，在src拼接中直接使用变量，而不是直接使用函数获取

心得：动态加载的数据，一般赋值给变量，而不要直接调取方法获取

star星辉
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
项目中遇到的问题1：iframe嵌套跨域内容，src变更但内容未刷新问题
小羊的博客
11-28 2107
**问题描述：**在A页面中通过iframe嵌套了B页面，B页面的内容是通过A页面的query里面的参数请求到的 使用watch监听了route变化，当query中传入的参数变更后就需要让iframe的src和内容同步变更，但在项目过程中，iframe随着变更了，但是iframe中的内容却没有同步更新 在网上查询到了下面的解决方法： 方法1：document.getElementById(ifr...
详解iframe的src指向的内容不刷新的解决办法
11-20
问题描述 html <iframe id="h5Content" src=""></iframe> js $("#h5Content").attr("src","${h5.url}"); h5.url对应的是一个ueditor编辑好存到数据库的一个页面. 修改这个页面内容提交后,iframe 中呈现的页面并没有变化. 原因 iframe的src的值发生改变,才会刷新iframe里面的内容. 所以虽然我代码的url对应的页面有变化了,可是url一直不变,也就是iframe的src的值一直没变.所以不刷新内容; 解决办法 原因找到了,解决就非常容易了.想任何一种办法让iframe的src的值有
iframe 高度自适应问题
moamao_jishuyuan的博客
02-09 909
需求介绍: 项目里要往web页面埋 facebook 的投稿，接口返回资源 如下： <iframe id="hankyumensosaka" src="https://www.facebook.com/plugins/post.php?width=350&href=https://www.facebook.com/306922136507980/posts/327540447779482" width="350" height="500" style="border:none; ove
Vue集成Iframe
最新发布
qq_41238459的博客
05-21 843
Vue集成iframe；Iframe和主页面之间如何进行消息传递
【vue】iframe相关问题
Qxn530的博客
03-02 5569
iframe刷新、子页面关闭iframe所在弹窗、iframe进度条一直加载中、iframe传参、iframe页面中需要使用wordexport等功能、iframe在弹窗中、iframe展示PDF不显示
解决一个项目嵌套另一个项目--iframe时遇到的问题：下拉框选择切换时，iframe对应的页面内容并没有相应改变
DcTbnk的博客
08-10 1075
这里写目录标题1.图片样式2.对应代码图片代码 1.图片样式 2.对应代码图片 其他的对应的监听事件等就不写了，只写关于iframe的 还是没弄懂为什么及时改变src的地址，iframe页面内容也不变，最后只好用原生js来解决了 因为上面的横向导航什么的都是home.vue页面的内容，而iframe是另一个页面的内容，点击那个页面的表格列操作中的【录入】会进入的iframe的及上图2，然后点击三级横向菜单，可进行iframe的内容切换 下拉框切换的展示代码—监听中进行 点击录入按钮–进入iframe
详解vue中使用protobuf踩坑记
10-17
在 Vue 中使用 Protocol Buffers（简称protobuf）可以帮助我们更高效地处理和传输数据。protobuf 是一种序列化协议，它提供了比 JSON 更小、更快、更简单的数据结构序列化方式。在本文中，我们将探讨如何在 Vue 项目...
VuePress 快速踩坑小结
10-17
VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码，这篇文章主要介绍了VuePress 快速踩坑小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈vue的踩坑路
08-29
浅谈vue的踩坑路 在本篇文章中，我们将探索 Vue.js 中的一些踩坑路径，包括 axios 模拟 GET 请求、图片加载问题、数据绑定问题等。 首先，让我们来看一下 axios 模拟 GET 请求的问题。在开发服务器中，我们可以...
vue基于iframe优雅实现全新的微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生
11-01
内容概要：以vue2为例，搭建一个左侧导航与顶部导航的二级导航的iframe框架项目。基于iframe优雅实现全新的微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生。 适合人群：具备一定编程基础，...
解决锚点链接跳转后位置上下偏移的偏移的办法
热门推荐
luoyu6的博客
10-05 1万+
应用场景：我们把导航固定在页面顶部的时候，点击锚链接跳转到相应的部分时，很可能导航把页面的内容覆盖了，像这样 导航把文字覆盖了， 原因就是我们设置了padding这类css属性 正常盒模型的宽度：width=width+padding+border,其实就是导航盖住了盒模型的padding，覆盖原因就不过多解释了。我们还是说下解决办法吧 问题：既然是锚链接，要跳转，就要用href呀，同时，...
a标签锚点 点击向上偏移解决方案
98程序员
08-28 1246
场景：写博客时打算采用vue官网的方式布局，技术栈也是vue，分head,aside和主要内容的main模块 左边为aside模块，两个a链接 当点击a链接时main模块滑动到对应id的盒子 但是因为head时采用position: fixed;固定定位 当点击a链接时 head元素是脱离文档流的 下面的aside包括main就向上偏移 变成这样了： head挡住了一部分 相信很多人都用overflow：hidden尝试恢复文档流，当时没用，这可能是a链接的特殊 解决方式就是在包裹aside和main的
有关iframe锚点,锚点出现上下偏移,锚点出现页面显示问题.iframe的srcdoc问题
lianmindiandi
06-22 908
有关iframe的srcdoc问题,iframe锚点定位,iframe锚点上下偏移
vue中使用Element组件el-dialog导致页面偏移——解决方法
weixin_44066534的博客
09-05 6010
在vue项目中里使用Element的el-dialog组件 问题1：原先的页面有滚动条，再引入弹出框之后又出现滚动条 解决方法：找到弹出框对应的class再将overflow设置为hidden 问题2：组件引起原页面偏移 修改完之后滚动条没了但是滚动条的位置还在，这导致了弹框出现的时候原来的页面会向左边偏移，引起页面的抖动 一番检查后发现问题所在：弹框出现的时候body上会被动态的添加上一个class和style 例如：点击弹框前的body 点击弹框之后 一开始一直把关注点放在组件上，甚至怀疑是e
[JavaScript] iframe更改了src后，父页面history.back只能后退iframe而不能使自己后退解决办法...
weixin_30755709的博客
07-03 1188
浏览器的机制如此，在iframe导航变化后手动点击浏览器的后退按钮也依然只是后退iframe中的导航。 有一种解决方案是不要修改iframe.src，而是删除旧iframe元素，新建一个iframe元素并替换它，这样不会产生history。 直接createElement，替换原来的iframe。 转载于:https://www.cnblogs.com/frost-yen/p/9258402....
JS 刷新保持iframe页面并支持浏览器前进后退
菜鸟记录
06-17 1547
⏹JS 刷新保持iframe页面并支持浏览器前进后退
刷新iframe的url
赵静的专栏
08-06 2865
js、jquery 给iframe指定src时 当第二次加载此路径时 加载原始数据的页面，无法刷新页面 ，解决办法如下： 执行$("#mainframe").attr("src", url); 后 ，通过mainframe.window.location=url;刷新页面
iframe的src指向的内容不刷新的解决办法之一
qq_14993591的博客
05-25 1460
iframe的src的值发生改变,才会刷新iframe里面的内容. <iframe :src="baseUrl" height="100%" frameborder="0" scrolling="auto" width="100%"></iframe> this.baseUrl = this.baseUrl + `&time=${new Date().getTime()` 给url后面通过问号传值,传一个当前时间, 这个值并没有其他用处,只是为了改变src的值. i
vue使用iframe
07-27
Vue可以使用iframe来嵌入其他网页或内容。你可以在Vue组件中使用`<iframe>`标签来创建一个iframe元素，并设置其src属性为你想要嵌入的网页的URL。 下面是一个示例： ```vue <iframe :src="iframeUrl" width=...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值