html中iframe自适应高度在本地运行无效果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html中iframe自适应高度在本地运行无效果相关的知识,希望对你有一定的参考价值。

我的一个html文件中有iframe,链接到其他几个html文件,自适应高度代码我有了,在服务器测试没有任何问题。但是,如果我把相关的这几个html文件放在本地直接双击浏览,发现firefox浏览没有问题,但是360浏览器6.2和最新谷歌浏览器浏览时,自适应高度代码无效果。我怀疑是否这两个浏览器在本地浏览文件时禁用了什么东西。因为在IE6下运行本地html时,弹出要我运行含什么什么风险的一个提示,我运行后,自适应高度没问题。(如果把这些html文件挂到本地iis上,再用360和谷歌浏览器浏览,自适应高度效果可以实现,没有任何问题。)但是我现在需要直接本地浏览,请问,360和谷歌浏览器如何设置相关选项使得本地html文件的自适应高度代码运行没问题呢?或者是其他的什么原因?请高手解答。谢谢!
if (document.getElementById)

if (pTar && !window.opera)
var pTar = document.getElementById(down);
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight)
pTar.height = pTar.contentDocument.body.offsetHeight;
else if (pTar.Document && pTar.Document.body.scrollHeight)
pTar.height = pTar.Document.body.scrollHeight;
这是我的代码,从网上找到的,服务器测试没问题啊。

参考技术A 应该是跨域问题,你是用js获取iframe里边内容的高度设置iframe的高度吧,因为外边页面和iframe里边的页面不在同一个域下,浏览器为了安全考虑不允许这种操作
ie下默认是可以跨域的追问

应该不是跨域问题,因为所有页面都是本地html页面。

追答

那就要看你怎么写的了

追问

我的代码已贴出,能帮忙看下有什么问题吗?服务器上测试过,没问题

追答

你代码不全
不过chrome在本地的页面也是有跨域问题的,没法获取body,放服务器上没问题
我写了个测试下

function loadpage2(url)

var iframe = document.getElementById("loadpageiframe");
if(iframe)

iframe.setAttribute("src", url);

if(window.attachEvent)
iframe.attachEvent("onload", function()
var hh = iframe.contentWindow.document.body.scrollHeight;
hh += 20;
iframe.height = hh;
iframe.style.height = hh+"px";
);

else

iframe.onload = function()
var hh = iframe.contentWindow.document.body.scrollHeight;
hh += 20;
iframe.height = hh;
iframe.style.height = hh+"px";
;



追问

您好,网上一些很多的iframe自适应高度js代码我都试了试,放iis上再浏览都没有问题。请问是不是一定放在iis上才会没有问题,直接在本地双击打开html进行浏览就无法实现html中iframe的自适应效果呢?为什么?感谢你的耐心回答。

追答

我只发现chrome下本地有问题,在服务器上都没有问题,估计就是跨域问题

本回答被提问者采纳
参考技术B <script type="text/javascript">
$(function ()
document.getElementById("ifm").src ="";//Url地址
$("#ifm").load(function ()
var h = document.body.clientHeight;
var w = document.body.clientWidth;
document.getElementById("ifm").height = h + "px";
document.getElementById("ifm").width = w + "px";

);
)
</script>
<body style="overflow-y:hidden;overflow-x:hidden">
<div id="pageone" style="">
<iframe name="ifm" id="ifm" scrolling="yes" style="background-color: transparent;" marginwidth="0" marginheight="0" frameborder="0">
</iframe>
</div>
</body>

iframe,已实现自适应高度,浏览器若没有全屏,则高度变小,内容只显示部分,无滚动条,怎么解决?

<div style="width:800px; float:left; ">
<!--右侧执行区域框架-->
<iframe id="iframe3" width="800" height="100%" scrolling="no" frameborder="0" src="basic_infor.aspx"

onload="this.style.height=parseInt(window.frames[3].document.body.scrollHeight);"></iframe>
</div>

该代码为框架部分,实现自适应。

若IE浏览器小窗口,则内容只显示窗口大小的部分,其他的不显示,不管是浏览器还是内部框架都没有滚动条,请高手指教一下
我指的是高度,宽度不用考虑。

你没明白我的意思,浏览器窗口弹出来的时候,如果不是全屏的话,那么我的网页宽度没改变,因为固定的,高度因为是自适应的,取的又是浏览器窗口的高度,所以导致浏览器窗口变矮,网页的内容也只能显示一部分,没显示出来的部分是完全看不到的,也没有滚动条之类的东西,要想全都显示,只能刷新页面。

参考技术A 如果你是想研究代码的我无话可说!就当我没说好了,但如果是想轻易解决问题的那我就说一下,右键点击任务栏--纵向平铺窗口.你打开IE--工具--Internet选项--高级--重置--确定.这样就回到原始状态,默认状态下使用就可以了,然后找一个喜欢的网页设为主页就OK. 参考技术B <div style="width:800px;height:100%; float:left; ">
<!--右侧执行区域框架-->
<iframe id="iframe3" height="100%" scrolling="no" frameborder="0" src="basic_infor.aspx"

onload="this.style.height=parseInt(window.frames[3].document.body.scrollHeight);"></iframe>
</div>

看看这样行不行

另外 如果要浏览器滚动条不显示 在body里加个
<body scroll=no>

下面是谁复制我答案的????晕死了本回答被提问者采纳
参考技术C <div style="width:800px;height:100%; float:left; ">
<!--右侧执行区域框架-->
<iframe id="iframe3" height="100%" scrolling="no" frameborder="0" src="basic_infor.aspx"

onload="this.style.height=parseInt(window.frames[3].document.body.scrollHeight);"></iframe>
</div>
参考技术D 重新下载个浏览器试试看。

以上是关于html中iframe自适应高度在本地运行无效果的主要内容,如果未能解决你的问题,请参考以下文章

iframe自适应高度设置(iframe自适应高度和宽度)

iframe标签嵌套页面时,如何让页面内的高度自适应

怎么让iframe自适应浏览器的高度和宽度

iframe高度自适应,终于解决了

总结iframe高度自适应,自适应子页面高度

iframe自适应高度