浏览器tab页不在当前页时推送iframe，切换到当前页时iframe渲染不出来

最新推荐文章于 2024-07-15 09:42:07 发布

薄荷硬糖

最新推荐文章于 2024-07-15 09:42:07 发布

阅读量594

点赞数

分类专栏：开发问题记录文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_42794873/article/details/113309292

版权

项目中遇到一个浏览器tab页不在焦点时推送iframe，当切换回来时iframe无法正常渲染的问题。解决关键在于利用Vue的v-if指令及监听窗口可见性API。

摘要由CSDN通过智能技术生成

在项目中遇到一个问题，浏览器tab页不在当前页时推送iframe，切换到当前页时iframe渲染不出来

// vue
methods: {
   
    hanldeVisiblityChange() {
   
      if (document.visibilityState === 'hidden') {
   
      // 此页面不是浏览器当前正在显示的tab页
        this.isCurrent =

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

薄荷硬糖

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue 多页面iframe不刷新_vue tab嵌入iframe切换不刷新，相对完整的方案

weixin_39867594的博客

12-19

1692

说到Vue的简单、便捷、高效，谁用谁喜欢，自然企业应用也来玩一把，三大经典组件：树控件，网格控件，选项卡控件；本章先说选项卡tab控件的嵌入iframe。本次主要解决以下问题：1.tab控件混合vue-component-view与iframe-view;2.切换tab, iframe-view 保持原界面不刷新，与keep-alive效果等同;3.关闭tab中的iframe-view后，将重新打...

vue中iframe如何让父页面刷新_页面iframe嵌套vue页面不刷新问题

weixin_39817012的博客

12-19

1101

$('#content iframe').attr('src',href);加上此行代码进行强制刷新,document.getElementById(iframe的ID).contentWindow.location.reload(true);var $div = $('.main-sidebar > .sidebar-menu');$div.on('click', 'li[data-hre...

1 条评论您还未登录，请先登录后发表或查看评论

【JavaScript】当使用iframe嵌入第三方平台的视频，又暂时找不到相关接口可以调用时，如何控制视频的暂停

最新发布

m0_49239264的博客

07-15

398

当使用iframe嵌入第三方平台的视频，比如优爱腾的，如果使用的方法受到限制，并且第三方视频平台没有提供相应的API，实现对嵌入iframe中的视频进行暂停会变得复杂。

vue中iframe如何让父页面刷新_Vue中对iframe实现keep alive无刷新的方法

weixin_39976413的博客

12-19

1032

前言最近一个需求，需要在Vue 项目中加入含有iframe 的页面，同时在路由切换的过程中，要求iframe的内容不会被刷新。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。Vue的keep-alive原理要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留...

chromium内核浏览器iframe跳转导致渲染异常

路过君的博客

12-31

1003

最近发现新版的chrome内核的浏览器(Chrome87.0.4280.88和EDGE87.0.664.66)，如果页面中嵌套的iframe进行地址跳转会发生渲染异常。正常渲染异常渲染，嵌套的页面正常加载，元素可以正常交互，只是没有渲染出来。缩放一下窗口即可正常渲染出来测试了个老版本浏览器没有这个问题(Chrome76.0.3809.132) 解决在iframe加载后重新触发一下渲染 variframeHandle = document.getElementById('iframe-log

vue 页面tabs切换,替换iframe

10-25

vue页面tab切换，替换原来的iframe实现，利用vue的router-view和keep-alive实现

【浏览器】浏览器原理及常见考点

zhaohb2016的博客

09-06

704

当执行 JavaScript 脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变 DOM 树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。协议、端口号、域名必须一致。

浏览器内置对象 Web API 规则部分

追梦程序员

09-28

730

B Background Fetch API (en-US) 后台获取可能需要很长时间，如电影，音频文件和软件下载的方法。 Background Tasks 幕后任务协作调度提供了由用户代理决定，在空闲时间自动执行队列任务的能力。 Barcode Detection API (en-US) 支持的各种条码二维码检测此功能仅在安全上下文(HTTPS)、某些或所有支持的浏览器中可用。 Battery API 提供了通过电池等级或者充电状态的改变提醒用户的事件 Beacon 信标（Be

2023高薪前端面试题（一、前端基础——HTTP/HTML/浏览器）

iaz999的博客

04-29

3249

语义化就是构成HTML结构的标签要有意义。比如有这样的标签：header表示页面头部main表示页面主题footer表示页面底部那么这些标签构成的HTML结构就是有意义的，也是语义化的。如果说页面的头部、主体以及底部都用div来表示，那么他就不是一个语义化的HTML结构了。

浏览器/html/css面试题----1

MingL520的博客

05-24

343

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

vue 中 elementui tabs 下的iframe 刷新

xw245184020的专栏

12-18

4887

1，tabs 渲染前给每个iframe绑定ref,ref的值要和Tabs Attributes的value值一致（value是当前选中标签的值） 2、通过当前选中标签的值获取iframe ,this.$refs[value]获取dom 这是一个数组 ,执行下面代码实现当前选中标签下的iframe刷新 this.$refs[value][0].contentWindow.location....

vue项目关于iframe嵌套的页面，在切换tab标签时会被重新刷新的问题处理方案

热门推荐

weixin_44900104的博客

03-16

1万+

vue项目关于iframe嵌套的页面，在切换tab标签时会被重新刷新的问题处理方案

vue-element-admin嵌入iframe切换时不刷新

darlene2929的博客

08-07

1382

https://gitee.com/chkhk/vue-element-admin/commit/9f1fcd03f92acf32d542fa322140a4e8feb724bb 亲测太好用了，别看他改的多，但是好用啊

【Vue】组件中v-show不渲染问题的解决

TalonZhang的博客

01-21

4256

问题：在使用 uni-app 开发的时候，写了一个类似于微博的关注组件，功能就是未关注的文章显示+关注按钮，关注后按钮消失。使用 v-show 来写，用一个变量isFollow来监听，isFollow来自于父组件通过 props传递。但是遇到一个问题就是：点击事件中修改isFollow的值之后，view 没有渲染，点击后关注按钮仍然存在，值确实已经发生改变，但 view 并没有重新渲染。 &...

前端vue页面，每次切换标签页，都重复刷新请求问题

qq_39776978的博客

03-24

1931

在vue的标签页切换时，是否遇到每次都请求，浪费性能，还会覆盖已有查询好的结果！或者是，切换标签页时，想要从新请求刷新页面。

vue使用iframe切换src路径时不重新刷新

Qiuqianye的博客

03-17

1869

因为使用docment去操作iframe的很麻烦，还有跨域的问题，所以使用v-if的方式重新渲染页面。有一个下拉框联动着iframe的src，下拉框每切换一下，iframe就重新刷新一下。如果只是用v-model去绑定iframe的src，手动修改是无法完成重新请求刷新的。v-if做一个延迟加载就可以啦。

layui 选项卡tab切换事件监听 iframe内容刷新

qq_36636312的博客

07-14

3521

1，效果图 2，tab切换展示代码（datapage.jsp） // 注意：要引入layui相关的插件 <body> <div class="layui-tab layui-tab-brief" lay-filter="demo"> <ul class="layui-tab-title"> <li class="layui-this">数据</li> <li>查询</li>

vue中iframe如何让父页面刷新_父页面刷新保持iframe页面url不变

weixin_39886172的博客

12-19

1137

思路：点击父页面时写cookies--》刷新时从cookies中奖内容读取出来。本文转自：http://blog.163.com/sdolove@126/blog/static/114637885201282415580/src={if $redirect_url}{$redirect_url}{else}"http://******.cn/jobs"{/if} >$(document).r...

Vue框架下集成Iframe页面的保存策略与实现方法

首先，项目的需求明确指出需要兼容Vue URL与JSP页面，并确保用户在切换到Vue路由后，返回JSP页面时能保留先前的数据。这涉及到在Vue的router-view区域之外创建一个解决方案，以隔离和缓存某些特定页面。实现思路的...