解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题

简介: 在页面上用了iframe带来方便的同时也带来了麻烦,在IE6里能正常显示的iframe在其他的浏览器里确十分丑陋而不方便。为了解决IE,Firefox,chrome,safari中iframe显示高度自适应问题上网海找了一遍,试了好几个方案都不妥,最后发现了一个可以正常解决的方案。
+关注继续查看

在页面上用了iframe带来方便的同时也带来了麻烦,在IE6里能正常显示的iframe在其他的浏览器里确十分丑陋而不方便。
为了解决IE,Firefox,chrome,safari中iframe显示高度自适应问题上网海找了一遍,试了好几个方案都不妥,最后发现了一个可以正常解决的方案。
首先加入以下的JS代码:

function stateChangeIE(_frame)
    {
         if (_frame.readyState=="complete")//state: loading ,interactive,   complete
         {
             AutoHeight();
         } 
    }

    function stateChangeFirefox(_frame)
    { 
        AutoHeight();
    }

   

    function AutoHeight()
    {
        if(document.readyState!='complete')
        {
            setTimeout( function(){AutoHeight();},50 );
            return;
        }
        else
        {
            try
            {   //IE、fireFox下测试通过
                var ifobj=document.getElementById("mainFrame");
                ifobj.style.height = ifobj.contentWindow.document.body.scrollHeight + 0 + "px";
            }   //注意,别忘了加最后那个"px",不然fireFox下就不起作用了
                //加的那0是为了让非IE浏览器高度不会一直增加
            catch(e)
            {}
        }
    }

其次使用iframe如下:

< iframe src="./welcome.html" name="mainFrame" id="mainFrame" onreadystatechange="stateChangeIE(this)" onload="stateChangeFirefox(this)" style="width: 100%; height: 9px" frameborder="0">

</iframe >

更改完成了,关闭浏览器重新打开或刷新页面,即可看到正常显示效果。以上代码在IE6,Firfox 3.6.11,Chrome(谷歌浏览器)7.0.544.0,Safari 5.0.2版本上显示正常。

目录
相关文章
|
8天前
|
Web App开发
GOOGLE chrome浏览器 非插件截图方法
emm...不知道大家知不知道,反正不管怎么样,我就拿来水一下 打开chrome 哦~ 右键审查元素 or F12 or ctrl+shit+i or 你自己设置的快捷键... 然后再ctrl+shit+p
11 0
|
8天前
|
Web App开发 JavaScript 前端开发
从浏览器原理出发聊聊Chrome插件
本文从浏览器架构演进、插件运行机制、插件基本介绍和一些常见的插件实现思路几个方向聊聊Chrome插件。
350 0
|
18天前
|
Web App开发
chrome浏览器 导入burp证书 失败 无法抓包
chrome浏览器 导入burp证书 失败 无法抓包
35 0
|
23天前
|
Web App开发 JSON 前端开发
根据markdown文件反向转换成chrome浏览器书签html
前几天手贱直接把 bookmark 的源文件给删了,这下这么多年收藏整理的书签只有自己博客里的一个 markdown 文件了,毕竟还是直接用浏览器自带的 bookmark 查看会方便好多,只能想办法怎么根据现在的 markdowm 文件转换回 bookmark.html 文件了
20 0
|
1月前
|
Web App开发 存储 缓存
(新)Chrome浏览器自定义背景插件
(新)Chrome浏览器自定义背景插件
54 0
|
1月前
|
Web App开发 开发者
Chrome浏览器导出插件crx
Chrome浏览器导出插件crx
|
1月前
|
Web App开发
Chrome浏览器所有页面崩溃
Chrome浏览器所有页面崩溃
|
2月前
|
Web App开发
chrome 浏览器在 112 正式版本以及 114 canary 版本从 devtools 控制台复制文本不会复制高亮显示的文本?
chrome 浏览器在 112 正式版本以及 114 canary 版本从 devtools 控制台复制文本不会复制高亮显示的文本?
17 0
|
2月前
|
Web App开发 Ubuntu 安全
【已解决】ubuntu 16.04安装最新版本google chrome出错, 旧版本chrome浏览器安装流程
【已解决】ubuntu 16.04安装最新版本google chrome出错, 旧版本chrome浏览器安装流程
181 0
|
3月前
|
Web App开发 测试技术
Selenium+python之隐藏浏览器的“Chrome正在受到自动软件的控制“提示语
Selenium+python之隐藏浏览器的“Chrome正在受到自动软件的控制“提示语
102 0
相关产品
云迁移中心
推荐文章
更多