奇怪的safari：0像素的iframe不能被display:none的div圈住隐藏

最新推荐文章于 2022-10-13 11:23:07 发布
原创 最新推荐文章于 2022-10-13 11:23:07 发布 · 5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#iframe #safari #div #firefox #浏览器 #html

本文探讨了不同浏览器下iframe显示黑点的问题,特别是在Firefox中。通过尝试使用CSS的display属性来隐藏这些黑点，发现这会影响Safari浏览器中iframe的功能。文章分析了这个问题的原因并讨论了可能的解决方案。
width="760" scrolling="no" height="90" frameborder="0" src="http://p.alimama.com/code.php?t=2&i=mm_10003521_106784_109301&w=760&h=90&sz=11&bgc=FFFACD&bdc=FFFFFF&tc=000080&lc=000000&dc=000000" name="alimamaifrm" id="alimamaifrm" border="0" marginwidth="0" marginheight="0">

0x0的iframe在ie下没有任何显示，而FireFox浏览器上却会显示一个黑点。
很多web2.0应用在FireFox下都有那一个个的黑点。
我尝试用<div style="display:none"><iframe></iframe></div>来隐藏黑点。
在firefox下效果很好，但在safari下出现了大的问题：
原有iframe的功能失效了，无法访问到被隐藏的iframe的src属性。
终于隐隐明白为什么黑点会始终存在。
但是这是个不该发生的问题，display是一个CSS样式而已，影响到HTML元素的功能就是很不应该。

浏览器兼容==头疼
反爬虫：请求头中 Referer 的反爬机制详解，并设计带 Referer 校验的网站
数据知道的博客
12-27 1151
本文详细解析了HTTP请求头中Referer字段的反爬机制及应对策略。Referer用于标识请求来源，网站通过校验Referer实现反爬，包括来源白名单、禁止空Referer、路径校验和防盗链等策略。文章提供了4种绕过方法：伪造Referer、模拟跳转链路、使用浏览器自动化和代理页面。同时指导如何设计更严格的Referer反爬系统，如结合其他字段校验、动态Referer等。最后通过FastAPI示例演示了带Referer校验的新闻网站实现，包含后端验证逻辑和前端页面代码，展示了完整的反爬与反反爬技
花了几小时初步总结了下前端知识点
coder小龙
11-28 1488
HTML 图像是通过标签 来定义的. HTML 链接是通过标签 来定义的。 1.3.4 音频和视频 HTML5 DOM 为 和 元素提供了方法、属性和事件。这些方法、属性和事件允许您使用 JavaScript 来操作 和 元素。参考链接：https://w
Safari 不支持 <option> 用 display: none 隐藏
猿海无涯，码农无边
03-13 950
1. 环境： macOS 版本：10.15.3 Safari 版本：13.0.5 2. 问题描述： 如题，就是个兼容问题 3. 解决办法： 写一个方法，根据条件返回重构后的 options。
点击隐藏div存在iframe无效
zy_crazy_code的博客
07-28 2736
点击隐藏div的时候有iframe 点击无法隐藏，因为iframe onclick根本无效       解决办法：  div   class="choice-list" style=" display: block;" id="choice-list" >    div style="position :absolute;left:0px;top:0px;width
关于嵌套使用 iFrame 出现 Refused to display in aframe 拒绝连接访问 和 ‘X-Frame-Options‘ to ‘SAMEORIGIN‘ 的解决方案【已解决】
热门推荐
XH_jing的博客
05-26 3万+
目录问题描述原因分析问题解决总结 今天在迁移旧项目时，出现了如下错误提示： Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN' 问题描述 当前项目是一个生产环境正常运行的项目，由于我们要迁移服务器并且部署 k8s，所以需要重新部署上线该项目。 使用 iframe 的场景就是在一个容器中展示另一个页面（也是我们自己的页面，只不过域名不同）才会抛出这个错误。 这个项目的在测试环境和生产环境都是可以正
safari浏览器display:none;但是依然显示的处理办法
qq_15697653的博客
03-18 3265
需要看一下在切换为display:none前，display是否为contents，如果是的话，改为display: block;
iframe display:none 自适应 需要判断src加载情况
tomspiders的专栏
08-10 1041
&lt;div id="dv_iframe" style="display:none;"&gt; &lt;iframe id='modcontent' name='modcontent'  frameborder='0'  src='test.html' scrolling='no' &gt;&lt;/iframe&gt; &lt;/div&gt;   display为none的时候，...
不使用scrolling="no"隐藏iframe的滚动条，并且可以滚动
最新发布
12-03
这样，滚动条被隐藏，但用户仍然可以通过鼠标滚轮或触摸滚动。 2. **在父页面控制：** 如果无法修改嵌入内容，可以在父页面通过CSS影响iframe。 - 但iframe的滚动条是内容的一部分，所以直接控制可能有限。 - ...
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随借备用金 - 嵌套页面</title> <style> body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; } #container { position: relative; width: 100%; height: 100%; } iframe { border: none; width: 100%; height: 100%; } .loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1A1A1A; display: flex; justify-content: center; align-items: center; z-index: 100; } .loading-spinner { width: 40px; height: 40px; border: 4px solid rgba(255, 200, 145, 0.3); border-top: 4px solid #FFAD5D; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div id="container"> <!-- 加载动画 --> <div class="loading-overlay" id="loadingOverlay"> <div class="loading-spinner"></div> </div> <!-- 嵌套的iframe --> <iframe src="https://d1.hdncxd.com/s/new-colSbj?callback=__CALLBACK__" id="contentFrame" allow="fullscreen"></iframe> </div> <script> // 等待iframe加载完成后隐藏加载动画 document.getElementById('contentFrame').addEventListener('load', function() { document.getElementById('loadingOverlay').style.display = 'none'; // 额外处理：确保iframe可以全屏显示 try { this.contentWindow.focus(); } catch(e) { console.log('跨域限制，无法直接操作iframe内容'); } }); // 如果加载失败的处理 document.getElementById('contentFrame').addEventListener('error', function() { document.getElementById('loadingOverlay').innerHTML = '<div style="color: #FFAD5D; text-align: center; padding: 20px;">' + '<p>页面加载失败</p>' + '<button onclick="window.location.reload()" style="background: #FFAD5D; color: white; border: none; padding: 10px 20px; border-radius: 5px; margin-top: 10px;">重新加载</button>' + '</div>'; }); </script> </body> </html> 帮我改好 ios上点击嵌套的页面为啥跳转不了 安卓上就可以
08-27
为了确定问题是WKWebView特有的还是iOS Safari共有的，可以在Safari中测试相同的iframe页面。如果Safari中正常，则可能是Cordova配置问题；如果Safari中也有问题，则可能需要调整页面代码。 ### 总结 以上方法中，...
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随借备用金 - 嵌套页面</title> <style> body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; } #container { position: relative; width: 100%; height: 100%; } iframe { border: none; width: 100%; height: 100%; } .loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1A1A1A; display: flex; justify-content: center; align-items: center; z-index: 100; } .loading-spinner { width: 40px; height: 40px; border: 4px solid rgba(255, 200, 145, 0.3); border-top: 4px solid #FFAD5D; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div id="container"> <!-- 加载动画 --> <div class="loading-overlay" id="loadingOverlay"> <div class="loading-spinner"></div> </div> <!-- 嵌套的iframe --> <iframe src="https://d1.hdncxd.com/s/d1" id="contentFrame" allow="fullscreen"></iframe> </div> <script> // 等待iframe加载完成后隐藏加载动画 document.getElementById('contentFrame').addEventListener('load', function() { document.getElementById('loadingOverlay').style.display = 'none'; // 额外处理：确保iframe可以全屏显示 try { this.contentWindow.focus(); } catch(e) { console.log('跨域限制，无法直接操作iframe内容'); } }); // 如果加载失败的处理 document.getElementById('contentFrame').addEventListener('error', function() { document.getElementById('loadingOverlay').innerHTML = '<div style="color: #FFAD5D; text-align: center; padding: 20px;">' + '<p>页面加载失败</p>' + '<button onclick="window.location.reload()" style="background: #FFAD5D; color: white; border: none; padding: 10px 20px; border-radius: 5px; margin-top: 10px;">重新加载</button>' + '</div>'; }); </script> </body> </html>帮我分析下为啥嵌套加载出来页面 但是在ios浏览器里面打开不能使用里面的功能 嵌套页面不能自动跳转
08-28
在iOS浏览器中嵌套页面加载正常但功能无法使用且不能自动跳转的问题，通常由以下原因导致，结合站内引用分析如下： --- ### 一、核心原因分析 #### 1. **WKWebView内存限制引发功能崩溃** iOS的WKWebView存在...
ios10以下safari设置style无效的解决方法
08-26
主要介绍了ios10以下safari设置style无效的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css 超出添加滚动条并隐藏滚动条
weixin_58224449的博客
10-13 1645
css 超出添加滚动条并隐藏滚动条
完美解决IE浏览器 option display:none 隐藏无效
郭猛的博客
11-04 9252
最近遇到了select 下的option需要根据前一个select选项来显示或隐藏，发现在IE下该功能无法实现。 自己在网上看了一下前辈们的解决方法，然后根据自己的实际情况改了一下，放在这里给需要的朋友。//初始化select function toggleOptionInit(obj,firstException){ var firstException = argume
iframe用display:none隐藏后，仍然能产生一次有效的访问
王艺强的博客
10-09 3313
display:none这段css代码只是把iframe隐藏起来，但程序仍然会访问目标地址，用户却是看不见的 比如： 《iframe name='hideFrame' style="display:none;" src="http://www.google.com" > 把这段代码放在html页面中，虽然什么都看不到，但是打开这个页面时，就会访问谷歌的网页
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值