vue路由IE9浏览器iframe显示空白

最新推荐文章于 2024-04-27 08:56:53 发布
最新推荐文章于 2024-04-27 08:56:53 发布
阅读量933 收藏
点赞数
分类专栏： web前端 文章标签： vue IE9空白 iframe空白
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cs380637384/article/details/108694763
版权

最近遇到一个很神奇的问题，vue路由地址在所有浏览器单独访问都能正常显示，但是将路由地址通过JS赋值给IE9中的iframe src时一直显示空白页，查看浏览器源代码发现路由地址一切正常。因为只有IE9存在这个问题，所以应该是IE9的bug。通过查阅资料最终得以解决。

1、HTML

<iframe ref="demo" src=""></iframe>

2、Vue

this.$ref.demo.contentWindow.location.href="http://www.xxx.com/aa.html"

 

cs380637384
关注
专栏目录
2021最新最全前端面试题（包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等）
datian45678的博客
06-22 1627
整理了一些前端面试题，希望对正在找前端工作的伙伴有用。本篇文章内容篇幅较大，主要针对初中级前端开发工程师。 篇幅过长，大家可以先点赞收藏以后慢慢看。 关于HTML 的title和alt属性有什么区别 alt：图片加载失败时，显示在网页上的替代文字 title：鼠标（手机端该属性无意义）放在图片上时显示的文字 alt是必需属性（但属性值可为空），title非必需 图片懒加载的原理 图像是img标记，浏览器根据图像的src属性请求图像，因此惰性加载的关键是当图像不在可视区域时，不给`imgs‘赋值。 懒加载
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
MingL520的博客
07-17 8万+
文档描述 本文是关注微信小程序的开发和面试问题， 由基础到困难循序渐进， 适合面试和开发小程序。 并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css和js热点面试题 因为csdn不可以有外链 所以答案链接在评论区！！！ Vue面试题 生命周期函数面试题 1.什么是...
Vue 嵌入iframe，没有显示对应的页面，显示空白或者拒绝了访问，解决的一个思路
普普通通的博客！
06-29 1万+
在给vue使用iframe嵌入页面的时候，明明没有bug，页面就是显示不出来，白屏了。调了很多iframe的设置，但是就是没有效果。 后来发现是我访问的时候，本机是https，但是访问的地址是http，有个跨域的问题。主要就是浏览器认为不安全。去搜索了一下Http和Https的跨域问题，结论如下：那么解决方案可以是做个代理转发，或者我选择了一个笨办法，就是我去试了下我要嵌入的这个链接https能不能访问，然后发现可以，我就自己自己加了一个s，就可以访问了~...
vue项目中，用iframe嵌套其他页面在IE浏览器打开空白而在谷歌打开正常的问题
weixin_44679078的博客
01-18 2668
vue项目使用iframe在ie中显示空白
iframe标签内容一闪而过，然后显示空白
吃翔的企鹅的博客
06-17 1147
在网上找的所有关于iframe的方法都不行，于是找到iframe页面的前一个修改版本，删除修改的内容就好了。 原因是vue的语法错误，循环时少写个了冒号，“:v-model”写成了“v-model”。 如果有人遇到类似的问题不妨看看是不是和我一样，大家写完代码一定要测试，不要犯了我上任的错误。 ...
vue3使用iframe引入其他网站，vue-router路由跳转后页面空白，刷新之后才展示页面内容乌龙事件
一只爱吃糖的小羊
08-02 2296
vue3项目的页面A跳转到页面B时，页面B页面是空白的，需要手动刷新一下才能恢复正常，在页面A中用iframe引入了别的网站（后续事实证明，跟iframe没一毛钱的关系）
iframe嵌入页面白屏_Vue使用iframe嵌入第三方网页并修改标题
weixin_39520210的博客
12-01 2139
之前在工作中遇到的问题，点击链到第三方网页，并要求修改标题。后面查了下，可以用 iframe 标签的功能大概的逻辑就是，点击A按钮，跳转到嵌入页面，嵌入页面中使iframe显示出来的页面，添加样式： position:fixed; width: 100%; height: 100vh; top: 0; left: 0;然后使用vue，...
前端H5面试题（vue为主）
qq_45656036的博客
06-24 1288
一.src和href的区别 ？ href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系 src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。 src用于替换当前元素， href 用于在当前文档和引用资源之间确立联系。 1、请求资源类型不同 2、 浏览器解析方式不同 3、作用结果不同 二.页面元素隐藏方式 和各自特点？ 第一种：display属性为none，效果：元素不
vue开发(考试)
ww6899的博客
01-04 2896
（vue课程）67道题 html选择题 1、下面关于css样式和html样式的不同之处说法正确的是（A） A、html样式只影响应用它的文本和使用所选html样式创建的文本 B、css样式只可以设置文字字体样式 不仅仅能够设置字体的样式 C、html样式可以设置背景样式 该句本身没错，但是题目是关于不同之处 D、html样式和css样式相同，没有区别 2、域名系统DNS的含义是（B）。 A.Direct Network System B.Domain Name
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
m0_67266787的博客
02-24 783
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
JS加载iFrame出现空白问题的解决办法
10-22
在使用IE6浏览器开发过程中出现各种奇葩问题，非常棘手，费劲脑汁终于问题解决。小编把解决办法分享到脚本之家平台，需要的朋友可以参考下
解决FireFox刷新后button 被 disabled
xiaoliang_xie的专栏
02-10 1509
方法1： window.addEventListener('pageshow', function(e){ // 重置你不需要 disabled 的按钮 }, false); 方法2: 给提交按钮加上 autocomplete="off" 的属性。
ie11等浏览器+iframe闪烁白屏
qq_42264793的博客
03-05 642
ie11等浏览器+iframe闪烁白屏 解决：
前端vue-element 登录随机生成数字验证码_element ui 随机验证码(1)
最新发布
2401_84447297的博客
04-27 310
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue 多页面iframe不刷新_页面嵌套 Iframe 产生缓存导致页面数据不刷新问题
weixin_39907289的博客
12-19 2558
最近遇到个比较古怪的问题：当页面嵌套多个 Iframe 时会出现 Iframe 里包含的页面无法看到最新的页面信息。初步解决方案，在 Iframe 指向的页面地址后缀添加一个随机数或者时间戳。这样能确保每次在加载页面时，让浏览器知道它是最新的页面。说白了就是欺骗下浏览器，躲过缓存的灾难。(这是从Stack Overflow 和 CSDN 上找到一个看似可行，能彻底治根的办法。 )Sample C...
解决vue前端iframe框架嵌套第三方网址拒绝访问
HD243608836的博客
04-16 4209
Refused to display '嵌套的网址' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
iframe加载白屏闪烁解决方案
dabaooooq的博客
03-05 2251
onload 事件在iframe载入完成后被触发，载入过程中隐藏，onload触发时显示，当然这个过程中可以做一些动画，在load事件中控制动画的显示隐藏即可。
Syntax Error: TypeError: Cannot read properties of null (reading ‘content‘)。问题解决
Saber_husband的博客
08-09 1万+
报错信息：
解决 “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“
热门推荐
qq_57558631的博客
05-17 12万+
这个报错 要用到的数据读不到这个属性 1.检查你的data定义的属性是不是没有你用到的这个属性,没有的话就定义一个，如下： #template <div class="he-info__item"> <span class="he-label">收货人姓名:</span> <span class="he-value">{{ detail.buyer.name }}</span> </div> <div cla....
vue iframe显示空白
05-27
如果在Vue中使用iframe显示空白，可能有以下几种原因和解决方法： 1. 确认iframe的src属性是否正确，是否与当前域名匹配。如果不匹配，可能会被浏览器拦截。 2. 确认被嵌入的页面是否存在跨域问题。如果存在跨域问题，需要在目标页面中设置HTTP头Access-Control-Allow-Origin，指定允许的域名。 3. 确认目标页面中是否存在JavaScript错误，如果有可能会导致页面无法正常加载。 4. 在Vue中，可能需要使用v-if指令来控制iframe的显示与隐藏，确保在iframe加载之前不会显示空白。 5. 如果嵌入的页面使用了X-Frame-Options HTTP头，可能会导致无法在iframe中显示。可以尝试在被嵌入的页面中去掉X-Frame-Options HTTP头或者将其设置为ALLOW-FROM。 以上是一些可能的解决办法，具体需要根据具体情况进行排查和调试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值