关于一段iframe自适应高度的代码的奇怪问题~

乌哩码嗏 2014-10-20 03:16:15

main.html的代码：



<html>

    <head>    

	

<!-- iframe自适应高度js代码 -->

<script type="text/javascript">

var Sys = {};

    var ua = navigator.userAgent.toLowerCase();

    var s;

    (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :

    (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :

    (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :

    (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :

    (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

 

if (Sys.opera || Sys.safari)

{

window.setInterval("reinitIframe()", 200);

}

function reinitIframe() //针对opera safari

{

var iframe = document.getElementByIdx_x_x_x("PandL");

try{

var bHeight = iframe.contentWindow.document.body.scrollHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

var height = Math.max(bHeight, dHeight);

iframe.height =  height;

}catch (ex){}

}

 

function iframeAutoFit(iframeObj)

{ 

setTimeout(function()

{

if(!iframeObj) 

return;

iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight)+30;//这里+30是有目的的，比如ie下会少那么一些像素

},200)

}

</script>





	</head>

    <body>

<iframe src="test.html" width="100%" height="300" frameborder="0" scrolling="no"

name="PandL" id="PandL" onLoad="javascript:iframeAutoFit(this);"></iframe>

    </body>

</html>

test.html的代码：



<html>

    <head>

    </head>

    <body>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

        aaaaaaa<br/>

    </body>

</html>

现在问题是：
我在本地测试几台机的chrome和opera都不可以实现高度自适应，但是上传到服务器居然行了，请问这是什么原因？

...全文

123 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

乌哩码嗏 2014-10-31

打赏
举报

结果始终是跨域问题，解决方法是：在没上传到服务器之前只好在本地搭建个简易服务器来调试了

乌哩码嗏 2014-10-20

打赏
举报

引用 5 楼 showbo 的回复:

[quote=引用 4 楼 zqaq_520 的回复:] [quote=引用 2 楼 showbo 的回复:] chrome要发布了未跨域情况下iframe和父页才能相互访问，本地file浏览器无法相互操作 opera如果file浏览无效果发布可以基本也是这个问题

看不是很懂，那是不是就是本地就一定不行呢？[/quote] 不行。。chrome要发布了（就是通过http协议访问），在未跨域的情况下才能相互操作，和ajax一样，本地file浏览（双击或者拖拽文件进入chrome中），chrome会跨域无法访问[/quote] 刚试~在360的极速模式底下居然也可以