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

最新推荐文章于 2023-04-17 17:41:10 发布
最新推荐文章于 2023-04-17 17:41:10 发布
阅读量4.9k 收藏
点赞数
分类专栏： javascript 文章标签： iframe safari div firefox 浏览器 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lenel/article/details/1806119
版权
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元素的功能就是很不应该。

浏览器兼容==头疼
lenel
关注
专栏目录
h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰
weixin_39647499的博客
12-19 1820
做H5开发，安卓和IOS的兼容问题经常会困扰我们，尤其是跟第三方平台合作，用到iframe嵌入式应用，令很多Web前端开发的童鞋脑壳疼，相信大家也入了不少坑，且踩且珍惜吧，呵呵^_^。今天抽时间整理一些出来，希望能帮助到大家。iframe自动变宽了，在IOS手机上出现滚动条第一步：定义 iframe 中的scrolling属性为no，设置iframe中不显示滚动条。第二步：设置iframe的样式为...
不能换行 俄语 前端h5_H5兼容问题及解决方法
weixin_39940901的博客
12-20 351
移动端如何定义字体font-family@ --------------------------------------中文字体的英文名称@ 宋体 SimSun@ 黑体 SimHei@ 微信雅黑 Microsoft Yahei@ 微软正黑体 Microsoft JhengHei@ 新宋体 NSimSun@ 新细明体 MingLiU@ 细明体 MingLiU@ ...
Safari 不支持 <option> 用 display: none 隐藏
猿海无涯，码农无边
03-13 755
1. 环境： macOS 版本：10.15.3 Safari 版本：13.0.5 2. 问题描述： 如题，就是个兼容问题 3. 解决办法： 写一个方法，根据条件返回重构后的 options。
点击隐藏div存在iframe无效
zy_crazy_code的博客
07-28 2626
点击隐藏div的时候有iframe 点击无法隐藏，因为iframe onclick根本无效       解决办法：  div   class="choice-list" style=" display: block;" id="choice-list" >    div style="position :absolute;left:0px;top:0px;width
safari浏览器display:none;但是依然显示的处理办法
qq_15697653的博客
03-18 3137
需要看一下在切换为display:none前，display是否为contents，如果是的话，改为display: block;
关于嵌套使用 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 的场景就是在一个容器中展示另一个页面（也是我们自己的页面，只不过域名不同）才会抛出这个错误。 这个项目的在测试环境和生产环境都是可以正
iframe display:none 自适应 需要判断src加载情况
tomspiders的专栏
08-10 928
&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的时候，...
请解释一下这段代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height"> <title>TOP 5000 电影数据分析</title> <style> ::-webkit-scrollbar { display: none; } html, body { font-family: 'Ubuntu Condensed'; height: 100%; margin: 0; color: rgba(0, 0, 0, 0.85); } </style> </head> <body> <div id="mountNode"></div> </div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> <script src="static/g2.min.js"></script> <script src="static/data-set.min.js"></script> <script src="static/jquery-3.2.1.min.js"></script> <script> function generateChart(id, type, xkey, xlabel, ykey, ylabel) { var chart = new G2.Chart({ container: id, forceFit: true, height: 500, padding: [40, 80, 80, 80], }); chart.scale(ykey, { alias: ylabel, min: 0, // max: 3000, tickCount: 4 }); chart.axis(xkey, { label: { textStyle: { fill: '#aaaaaa' } }, tickLine: { alignWithLabel: false, length: 0 } }); chart.axis(ykey, { label: { textStyle: { fill: '#aaaaaa' } }, title: { offset: 50 } }); chart.legend({ position: 'top-center' }); chart.interval().position(`${xkey}*${ykey}`).label(ykey).color('#ffb877').opacity(1).adjust([{ type, marginRatio: 1 / 32 }]); chart.render(); return chart; } </script> <script> let chart = generateChart('mountNode', 'dodge', 'genre', 'genres', 'count', '# movies'); window.onload = () => { $.getJSON("/static/genres.json", d => { chart.changeData(d) }) } </script> </body> </html>
最新发布
06-02
6. `<style>` 标签用于定义页面的样式，包括隐藏滚动条、字体等样式。 7. `<body>` 标签包含了页面的主要内容。 8. `<div id="mountNode"></div>` 是一个空的 div 元素，用于挂载柱状图。 9. `<script>` 标签包含...
微信h5支付在iframe弹窗的坑
gtcfla_的博客
09-09 5098
官方接入文档 参考链接： 微信H5支付遇到的坑 微信H5支付iframe在苹果Safari的问题 遇到的问题 网络环境未能通过安全验证，请稍后再试 spbill_create_ip问题，如果是客户端拉起mweb_url地址就是客户端ip，如果是服务器请求mweb_url就是服务器ip 商家参数格式有误，请联系商家解决 一般是由于调起H5支付的referer为空导致，Referer 是 HTT...
JS怎么控制IFRAME高度自动适应内容而不出现滚动条
lqc851011的专栏
07-21 1万+
   function setHeight(){  var iframe = document.getElementById("iframe_id");     try{       var aHeight = iframe.contentWindow.document.body.scrollHeight;       var bHeight = iframe.contentWindow.document.documentElement.scrollHeight;       var height = Ma
iframe用display:none隐藏后，仍然能产生一次有效的访问
王艺强的博客
10-09 3074
display:none这段css代码只是把iframe隐藏起来，但程序仍然会访问目标地址，用户却是看不见的 比如： 《iframe name='hideFrame' style="display:none;" src="http://www.google.com" > 把这段代码放在html页面中，虽然什么都看不到，但是打开这个页面时，就会访问谷歌的网页
iframe设置display:none导致嵌入的页面之前的滚动位置清零
qq_36093530的博客
04-17 655
使用iframe同时嵌入多个页面时,iframe设置display:none导致嵌入的页面之前的滚动位置清零
关于浏览器自动添加display：none属性的解决方法
sunshineSQ的博客
08-05 6262
最近遇到一个匪夷所思的问题，如下，最外层div并没有设置display属性，但是在浏览器中运行的时候却出现了element style{display：none}： 浏览器中是这样： 实在是不知道其中的缘由是什么，也去不掉，因为是浏览器自己加上的。 尝试解决方法如下： 1.手动在div里面加上内联样式：style=“display：block”，但是没效果，失败 2.将div的...
解决 chrome 浏览器对 div 的 display : none 不支持
Oo小白
12-12 9796
试了很久，发现在style设置display：none的时候，IE是可以的，但是chrome不行 测试测试 在chrome下，“测试测试”这几个字还是占位置的，即时display：none不起效，最后将代码改成下面这样才可以。 测试测试 个人认为，chrome浏览器下，只要div还有内容，display：none就不起效，所以要将di
关于js在iframe中显示与隐藏的控制方式（display、visilibity以及hide()/show()）
weixin_30680385的博客
01-08 2585
引子： 在项目开发过程中，使用iframe嵌套不同的页面，通过菜单来控制页面的切换展示。最开始使用的是show()和hide()方法来控制页面的展示与隐藏，但是遇到嵌套的页面高度不固定， 当嵌套页面过高会出现滚动条，如果拉下滚动条到某个位置，然后切换页面，再切换到上个页面时滚动条就自动到顶部而不是在之前下拉到的位置，所以这就存在问题。 这里，自己简单写了一个示例页面来更好的说明一下这个问题：...
iOS 7隐藏特性与优化：CALayer新功能与动画提升
iOS7的发布引起了开发者们的广泛关注，尽管全球开发者忙于修复应用兼容性的问题，却忽视了一些隐藏的特性和改进。其中一个显著的变化是`NSArrayfirstObject`方法，从iOS4时代起就存在，但在iOS7中被提升为公开API，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值