https前端http类型的iframe 白屏现象

最新推荐文章于 2024-05-30 15:14:05 发布
最新推荐文章于 2024-05-30 15:14:05 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： http 文章标签： http https html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sy_yan/article/details/120190622
版权

https前端http类型的iframe 白屏现象

1. 非技术手段

  • 嵌套的时候严格遵守浏览器协议 禁止https嵌套http
  • 浏览器的修改
  • 严格遵守过网站的url

2. 技术手段

meta存在两个非必须的属性http-equiv和name, 用于表示要设置的项。
比如,设置的项是Content-Security-Policy设置的值是upgrade-insecure-requests。

因为https地址中，如果加载了http资源，浏览器将认为这是不安全的资源，将会默认阻止。后来在文档中添加了完美解决

sy_yan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe加载时白块及刷新白色背景问题解决
08-16
在使用iframe时，iframe背景为白块，刷新时也会闪过白块。如果刷新时间长，就会一直出现白块，让人很烦恼，通过网上搜资料，测试很多依然没有效果，最终解决方法如下所示,注意主要针对IE浏览器测试。
iframe嵌套web纯前端页面，运用Bootstrap(v5.1)技术
09-18
iframe实现左侧菜单右侧页面简单示例。点击左侧菜单，右侧显示不同html内容，并加有css样式，美观实用。很简单的界面，没有多余功能。博文网址：https://blog.csdn.net/LawrenceUyi31?type=blog
iframe加载白屏闪烁解决方案
dabaooooq的博客
03-05 2049
onload 事件在iframe载入完成后被触发，载入过程中隐藏，onload触发时显示，当然这个过程中可以做一些动画，在load事件中控制动画的显示隐藏即可。
在https页面，通过iframe实现http跨域访问（解决iframe页面点击浏览器刷新按钮后返回首页问题）
最新发布
lyn1772671980的博客
05-30 584
在https项目页面，利用iframe嵌入http项目页面，用nginx配置抓发后解决跨域，浏览器F5刷新后，请求的http项目的页面返回首页，并不是url对应的页面（https、http项目均为vue项目）解决方案：http项目改为history路由，iframe修改src。问题原因：由于http项目用的hash路由，导致刷新后返回首页。
解决FireFox刷新后button 被 disabled
xiaoliang_xie的专栏
02-10 1479
方法1： window.addEventListener('pageshow', function(e){ // 重置你不需要 disabled 的按钮 }, false); 方法2: 给提交按钮加上 autocomplete="off" 的属性。
iframe加载白屏闪烁问题解决
rpiszbybb的博客
04-19 2150
point：onload 事件在frame或者iframe载入完成后被触发。 直接上代码： export default function IframeDemo() { const [iframeLoad, setIframeLoad] = useState<boolean>(false); return ( <div className={cn(style.itemImg, style.iframeWrapper)}> /* 添加缺省图/水印 .
iframe嵌入页面白屏_封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
weixin_39588983的博客
12-01 201
在页面中嵌入PDF文件在上一篇《在html页面中嵌入其他页面的方法——零基础自学网页制作》(结尾见目录)中我们学习了如何在页面中嵌入其他页面的操作。今天我们来嵌入一个pdf文件。其实使用示例代码如下： 页面效果如下：考虑到pdf的版权问题就不给大家上传云盘了，大家可以找其他pdf文件代替即可。如果您对这本书感兴趣可以关注并私信我。除此之外再给大家介绍两个新标签。一个是标签，一个是标签。标签和标签...
https使用iframe嵌入http资源的问题
热门推荐
lao_pei的专栏
06-22 6万+
  1）目前现象：           https 网站 使用iframe嵌入http资源网站的内容，会弹出“是否加载不安全的内容”的提示，点击“加载”按钮后显示正常。          对用户来说显示不友好。  2）问题原因：          https中使用http的资源时，浏览器会认为可能会不安全， 会自动弹出“是否加载不安全的内容”的提示。          该提示由浏览器自动弹出，不能...
前端项目-iframe-resizer.zip
09-03
在前端开发中，有时我们需要在页面中嵌入`iframe`元素来展示来自不同源的内容，例如第三方服务、广告或者子应用。然而，由于浏览器的安全策略和不同尺寸的内容，`iframe`的尺寸管理往往成为一项挑战。`iframe-...
vue基于iframe优雅实现全新的微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生
11-01
基于iframe优雅实现全新的微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生。 适合人群：具备一定编程基础，工作1-3年的研发人员 能学到什么： 1、使用postMessage方法来完成基座项目和子...
微前端iframe双向通信TS编译npm仓储源码
04-26
window本身可以支持iframe的双向通信，但是有两个弊端 1.接收消息时，多个业务通道无法区分，需要在addEventListener回调中做大量的判断，不方便管理通信通道 2.发送消息时不支持消息的回调，也就是说发布订阅模式，...
iframe内容页白块及刷新白色背景问题解决
07-24
iframe内容页白块及刷新白色背景问题解决，在IE6，IE9上测试通过。
layui easyweb iframe v3.1.8源码
12-08
[增加] 增加fixed方式的select，可用在表格、滚动弹窗中 [增加] 增加动态模板功能 [增加] 主页工作台、控制台的内容进行了补充完善 ...[优化] iframe版不需要在每个页面写loading了，由框架自动增加 [优
https iframe嵌套http页面
康一夏忙中偷闲的日子
05-06 2301
page iframe status http http allowed http https allowed https http not allowed https嵌套http不支持 https https allowed https https insecure scripts not allowed https https inscure images allowed but the browser will warn ————————————————...
iframe加载白屏问题
allanGold
05-28 8198
注意： 当主URL为https协议，而iframe加载的URL为http协议，就会导致加载不出来现象； 修改方案： 把主URL修改为http协议
iframe嵌入页面白屏_Vue使用iframe嵌入第三方网页并修改标题
weixin_39520210的博客
12-01 2095
之前在工作中遇到的问题，点击链到第三方网页，并要求修改标题。后面查了下，可以用 iframe 标签的功能大概的逻辑就是，点击A按钮，跳转到嵌入页面，嵌入页面中使iframe显示出来的页面，添加样式： position:fixed; width: 100%; height: 100vh; top: 0; left: 0;然后使用vue，...
iframe空白的原因
walle的博客
10-21 3512
iframe本地是ok的，线上是空白的， 原因是线上是https的，而iframe的src是http的
iframe白屏无响应
12-07
在Web响应式布局中，让iframe自适应的方法有很多种，但是如果iframe出现白屏无响应的情况，可能是以下几个原因导致的： 1. iframe的src属性为空或者指向的页面不存在； 2. iframe的宽度和高度设置不当，导致无法正常显示； 3. iframe所在的页面存在跨域问题，导致无法正常加载。 针对以上问题，可以采取以下措施进行解决： 1. 确认iframe的src属性是否正确，如果为空或者指向的页面不存在，需要进行修正； 2. 确认iframe的宽度和高度是否设置正确，可以采用百分比或者像素值进行设置，确保能够正常显示； 3. 如果存在跨域问题，可以采用以下方法进行解决： - 在iframe所在的页面中添加以下meta标签：`<meta http-equiv="X-Frame-Options" content="allow">`； - 在iframe所在的页面中添加以下JavaScript代码：`document.domain = "yourdomain.com";`，其中yourdomain.com为主域名； - 在被嵌入的页面中添加以下JavaScript代码：`document.domain = "yourdomain.com";`，其中yourdomain.com为主域名。 如果以上方法都无法解决问题，可以参考别的项目的配置进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值