今天有个网站的网页出现在360浏览器兼容模式下显示正常,在360浏览器极速模式下显示不正常。按照日常经验排查了各种可能出现的问题,但是都没有效果。后来开始怀疑是不是iframe的问题,但是iframe也正常处理了高度显示了。十分的困惑不解,后来上网查了下发现是360浏览器极速模式对iframe不支持。因为360浏览器极速模式是基于谷歌的内核,找到方向之后开始着手处理。

一开始网页按照这种方式处理,ie、ff等的浏览器都可以但是360浏览器极速模式下不可以

<iframe style="Z-INDEX: 2; VISIBILITY: inherit; WIDTH: 98%; HEIGHT: 100%" marginwidth="0" frameborder="0" scrolling="no" id="articleMain"  name="articleMain"
οnlοad="document.all['articleMain'].style.height=articleMain.document.body.scrollHeight ”    >

现在在网上大神的帮助下按照这种方式处理完美解决。如下:

在嵌套的子网页中加入如下代码:

<script type="text/javascript">
function iframeAutoFit() {
   try {
     if(window != parent) {
       var a = parent.document.getElementsByTagName("IFRAME");
       for(var i = 0; i < a.length; i++) {
         if(a[i].contentWindow == window) {
           var h1 = 0, h2 = 0, d = document, dd = d.documentElement;
           a[i].parentNode.style.height = a[i].scrollHeight +"px";
           a[i].style.height = "10px";
           if(dd && dd.scrollHeight) {
             h1=dd.scrollHeight;
           }
           if(d.body) {
             h2 = d.body.scrollHeight;
           }
           var h = Math.max(h1, h2);
           if(document.all) {
             h += 4;
           }
           if(window.opera) {
             h += 10;
           }
           a[i].style.height = a[i].parentNode.style.height = h +"px";
         }
       }
     }
   } catch(ex) {}
}

if(window.attachEvent) {
   window.attachEvent("onload", iframeAutoFit);
} else if(window.addEventListener) {
   window.addEventListener("load", iframeAutoFit, false);
}  
</script>

360浏览器极速模式对iframe的支持相关推荐

  1. 360浏览器极速模式自动_浏览器正在为网站带来自动暗模式

    360浏览器极速模式自动 nalyvme/Shutterstock.comnalyvme / Shutterstock.com Dark mode is now everywhere, includi ...

  2. 设置网页默认为360浏览器极速模式打开

    设置网页默认为360浏览器极速模式打开 在head标签中添加一行代码: <html> <head> <meta name="renderer" con ...

  3. 360浏览器5兼容模式吗_Vue-cli项目,打包生产模式,部分用户360浏览器极速模式下奔溃...

    一直使用macOS系统下chrome浏览器下开发,仅仅使用到ant design pro vue 组件库,默认的脚手架配置. 客户使用win7下360安全浏览器访问,自动变成"兼容" ...

  4. vue使用npm不会自己加到plugins_Vue-cli项目,打包生产模式,部分用户360浏览器极速模式下奔溃...

    一直使用macOS系统下chrome浏览器下开发,仅仅使用到ant design pro vue 组件库,默认的脚手架配置. 客户使用win7下360安全浏览器访问,自动变成"兼容" ...

  5. swiper在360浏览器极速模式下图片第一次加载不出来的坑

    废话不多说直接上代码 .lunbo1 {width: 1170px;height: 200px;/*height: 100%;*/margin: 30px auto 0 auto;/*overflow ...

  6. 360浏览器极速模式_【小技巧】解除浏览器主页以及,锁定主页~

    这个就,随手写写吧,也是没事划划水. 很多小白用户经常遇到的问题 首页不是什么hao123,就是hao360,再不然就是2345导航. 这个更适合使用chrome浏览器(或者使用它的内核的). 主页方 ...

  7. 代码切换360浏览器极速模式和兼容模式

    http://www.zhihu.com/question/20446741 转载于:https://www.cnblogs.com/chanAndy/p/5834549.html

  8. 360安全浏览器极速模式对rem失效

    360浏览器最小字体默认跟ie和chrme不统一 (截止 2020/11/18) 由于我的 rem:px 换算率较小 10:1 导致在360浏览器极速模式下字体大小生效,块级盒子元素大小是不变化的 遇 ...

  9. 360 浏览器“兼容模式”下,接口请求缓存问题解决方法

    文章目录 起因 解决方案 1. 在 get 请求的 url 中增加随机标识 2. 请求设置 3. 改为 post 请求 起因 360 浏览器"极速模式"采用 Blink ( Web ...

  10. php怎么兼容360浏览器,360浏览器兼容模式的页面显示不全怎么处理

    这次给大家带来360浏览器兼容模式的页面显示不全怎么处理,处理360浏览器兼容模式页面显示不全的注意事项有哪些,下面就是实战案例,一起来看一下. 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基 ...

最新文章

  1. 装java 无法应用转换程序_应用程序崩溃“android.app.Application无法强制转换为”...
  2. 汇聚6年思想变迁:知识图谱报告幻灯片大全
  3. 李彦宏:汽车工业面临无人驾驶百年变局
  4. mysql max_allowed_packet 查询和修改
  5. 大工17春计算机应用基础在线测试2答案,大工14春《计算机应用基础》在线测试2...
  6. Java钱包_钱包行云java
  7. 前端学习(1857)vue之电商管理系统电商系统之登录过程和token
  8. 【知了堂学习笔记】MySQL数据库常用的SQL语句整理
  9. 小样本点云深度学习库_论文 | 小样本学习综述
  10. python接球游戏
  11. 算法:剑指 Offer 06. 从尾到头打印链表
  12. FastDFS简单介绍
  13. 给大家推荐一套 git 工作流
  14. GBASE监控工具简介
  15. 2022前端面试系列——Vue面试题
  16. 易懂 | 手把手教你编写你的第一个上位机
  17. win7怎么查找网络上的计算机,Win7系统无法查看工作组计算机如何解决? Win7系统查看工作组计算机的方法...
  18. swiper的小bug slideTo方法不触发slideChangeTransitionStart(swiper)
  19. android开发 高德地图自定义地图应用【最新】
  20. mysql数据库d导出数据_mysql数据库导入导出

热门文章

  1. PowerApps 中的单选控件
  2. Gossip 协议简介
  3. 腾讯视频qlv格式转换成mp4格式的的简单方法!
  4. Soul App 高管被捕,恶意举报导致竞品被下架
  5. 你所不知道的文件上传更安全的类型判断
  6. android 高德定位失败,android 高德地图出现【定位失败key鉴权失败】
  7. vue中局部过滤器和全局过滤器的使用
  8. 一对多,多对多,一对一
  9. 一级计算机考试电子表格排序筛选,重新应用Excel排序和筛选或清除筛选
  10. 图的存储结构——邻接表