Vue 使用iframe嵌入页面，ios显示空白，安卓正常

最新推荐文章于 2024-06-20 16:05:01 发布
最新推荐文章于 2024-06-20 16:05:01 发布
阅读量834 收藏
点赞数 1
分类专栏： vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Luckygirl_jian/article/details/135133109
版权

在vue中使用iframe嵌入页面，ios页面显示不出来，白屏了，安卓确是正常显示，也设置了相关iframe的属性，但是就是没有任何效果，到底是怎么回事
原因：
安卓默认允许跨域请求，使用的是http协议
ios默认不允许跨域请求，使用的是https协议
而项目中访问的地址就是给的http，所以有跨域问题，浏览器认为不安全，需要后端把接口域名改成https协议
关于http和https：
http可以调用https
https不可以调用http
http可以http
https可以https

Luckygirl_jian
关注
专栏目录
iframe跨域与session失效问题的解决办法
01-21
何为跨域跨域session/cookie？ 也就是第三方session/cookie。第一方session/cookie指的是访客当前访问的网站给访客的浏览器设置的seesion /cookie, 会被存储在访客的计算机上。第三方session/cookie指的是当前访问的网站中会加载（嵌入）另外第三方的网站代码，例如促销广告，那么第三方网 站也会在访客的计算机上添加session/cookie，这种就是第三方session/cookie。 我的问题 在开发讯息在线产品（http://iap.pgia.net）测试各种浏览器的兼容性时，发现IE浏览器（v7\8）都无法登录（总是提示验证码不匹配
VUE 解决mode为history页面为空白的问题
10-16
今天小编就为大家分享一篇VUE 解决mode为history页面为空白的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于vant4+vue3版本，tabs#title插槽自定义内容在ios机型中不占位问题。
最新发布
Anthony_Ccc的博客
06-20 226
Vant4中tabs组件bug
iframe框架显示空白页的原因及解决办法
热门推荐
yumon321的博客
10-10 3万+
今天上午突然发现前几天用着没有问题的iframe框架竟然显示空白页了，很是郁闷。从debug的角度来说，这次改错真是失败，明明是很简单的一个问题，结果被我耗费了半天的时间，可惜可惜。 下面说一下是怎么回事吧。 iframe框架显示空白页，有head和body标签，但是里面都没有内容。 最后查出错误，原来是我的网站设置了https，但是iframe的src我用的还是http，从而导致这个地址被...
Vue 嵌入iframe，没有显示对应的页面，显示空白或者拒绝了访问，解决的一个思路
普普通通的博客！
06-29 1万+
在给vue使用iframe嵌入页面的时候，明明没有bug，页面就是显示不出来，白屏了。调了很多iframe的设置，但是就是没有效果。 后来发现是我访问的时候，本机是https，但是访问的地址是http，有个跨域的问题。主要就是浏览器认为不安全。去搜索了一下Http和Https的跨域问题，结论如下：那么解决方案可以是做个代理转发，或者我选择了一个笨办法，就是我去试了下我要嵌入的这个链接https能不能访问，然后发现可以，我就自己自己加了一个s，就可以访问了~...
在vue中实现嵌套页面(iframe)
11-19
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”0″ scrolling=”auto”style=”position:absolute;top: -300px;left: 0px;”></iframe> 补充知识：关于VUE嵌套iframe的一系列问题 此文是建立在vue-cli之上 ，当然单写也可以，下文会涉及一些关于cli的知识，
在vue中嵌入iframe页面
MAYA_G的博客
04-26 2981
一、嵌入iframe页面业务场景 项目是一个物流运营平台的管理系统，系统中对接了第三方的客服系统。因此这里需要在自己的页面中嵌入三方客服聊天的页面（这里对接了智齿）。ps：别问我为什么不自己写一个聊天的功能，问就是不知道。 二、iframe是什么 ifram标签规定了一个内联框架，让我们有可能在当前的HTML文档中嵌入另外一个文档，目前所有的主流浏览器都支持iframe标签，当然为了以防万一你...
前端vue-element 登录随机生成数字验证码_element ui 随机验证码(1)
2401_84447297的博客
04-27 298
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
iphone中访问带有iframe的网页无法显示全部内容
Code-Create-World
06-14 9133
今天在解决公司平台网页在手机端访问兼容性问题时，遇到index页面通过iframe嵌入右边内容页面在anroid显示正常（主要为：页面内容超过iframe高度、宽度，可以正常显示滚动条，也可以滑动显示），但是在iphone自带的浏览器或者在iphone下载其他浏览器访问，iframe内容均无法全部显示，主要表现为： 1、iframe只显示了嵌入内容的部分，无法显示全部，感觉内容被截掉了 ...
h5中嵌入android页面,android&ios内嵌H5页面使用jsbridge实例
weixin_39979489的博客
05-30 517
1、使用vue.js框架搭建前段项目页面 在main.js中初始化 WebViewJavascriptBridge 对象，WebViewJavascriptBridge 是app端定义的，在前端页面中获取 获取过程需要等待 ， 所以vue实例的创建要在WebViewJavascriptBridge 获取成功之后，因为我的vue入口页面用到了jsbridge方法调用app端的数据获取header信...
ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)
08-30
下面小编就为大家带来一篇ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS加载iFrame出现空白问题的解决办法
12-28
在使用IE6浏览器开发过程中出现各种奇葩问题，非常棘手，费劲脑汁终于问题解决。特此把我的问题描述及解决办法分享到软件开发网平台，帮助那些遇到此问题的朋友。 1、js加载iframe出现空白 iframeID 是加载的 Iframe ID号，修改成自己用的即可。 <iframe name=frames id=iframeID src=/> setTimeout(document.frames['+iframeID+'].location.href='+iurls+';,0); //或 setTimeout(document.frames['+iframeID+']
解决在vue引入iframe 高度不自适应的问题
weikehang的博客
10-20 5813
class Iframe { constructor(options) { this.$el = document.createElement('IFRAME'); this.$options = options; this.$target = options.target ? document.getElementById(options...
iframe嵌套视频横屏播放
qq_22552085的博客
04-27 2661
一.H5重力感应   手机的重力感应支持里，有两个主要的事件：    1.OrientationChange(在屏幕发生翻转的时候触发)    2.DeviceOrientation+DeviceMotion(重力感应与陀螺仪)二.科普时间重力感应：基本上是平板电脑和只能手机的标准配置，起到的作用也很简单，比如玩赛车，控制左右转弯，屏幕横屏竖屏的切换，都需要用到重力感应模块.陀螺仪：又叫角速度传感...
HTML嵌入iframe空白,IE6下iFrame页面嵌套html空白问题解决
weixin_42521558的博客
06-19 1396
IE6下用iframe嵌套页面：被嵌套页面如果有如下css：html { position: relative; }会导致出现如下问题：被嵌套页面先加载出来，然后变为空白。原因：被嵌套html定位到西伯利亚去了。解决办法：在被嵌套的html加载完成后，把iframe的position属性值改为relative。例一：iframe页：被嵌套页：html { position: relative; }...
iOS项目中的iframe不能访问外部链接，出现空白的解决办法
I_LV_XJ的博客
05-27 1万+
最近做项目的时候，在app内部要访问外部的一个链接，在chrome和Android上面都是正常的，但是项目打包到iOS上面，其他的都正常，但是iframe内容为空，出现了白屏，出现这个的原因是iOS不让我们访问外部链接，所以我们要给app授权，在config.xml中配置下面的语句： 这样的配置之后，就可以正常访问了。
iframe嵌套网页多出来的空白如何解决
qq_53715696的博客
03-21 1285
解决iframe头部问题
vue使用iframe嵌入页面并传参
07-27
在Vue中使用iframe嵌入页面并传参，可以按照以下步骤进行操作： 1. 在Vue组件中，可以使用`<iframe>`标签来创建一个iframe元素，例如： ```html <template> <div> <iframe :src="iframeUrl" ref="myIframe"></iframe> </div> </template> ``` 2. 在Vue组件的`data`选项中，定义一个变量来存储要传递给iframe的参数，例如： ```javascript data() { return { iframeUrl: 'https://www.example.com?param=value', }; }, ``` 3. 如果你想动态传递参数，你可以在数据改变时更新`iframeUrl`的值，例如： ```javascript methods: { updateIframeUrl() { // 根据需要更新参数或URL this.iframeUrl = 'https://www.example.com?param=newValue'; }, }, ``` 4. 如果你想在Vue组件中访问iframe中的内容或与iframe进行通信，可以通过`ref`属性引用iframe元素，并使用JavaScript来操作它，例如： ```javascript mounted() { const iframe = this.$refs.myIframe; // 访问iframe中的内容 const iframeDocument = iframe.contentDocument || iframe.contentWindow.document; // 在iframe中执行JavaScript iframe.contentWindow.postMessage('message', '*'); }, ``` 以上是在Vue中使用iframe嵌入页面并传参的基本步骤，你可以根据具体需求进行进一步的定制和处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值