iframe 内容高度在镶边中为空
iframe content height null in chrome
>我正在使用jQuery根据iframe的内容动态更改其大小,因此它不显示滚动条。该脚本非常简单,在IE9中工作正常,但在chrome中没有任何反应,我添加了一个小的"警报"仅用于debbuging,我发现var"cont_height"没有在chrome中定义。
所有文件都在我的电脑中,包括 iframe 中加载的页面,因此应该没有跨域问题。
chrome 中的调试工具给了我这个错误:"阻止了原点为"null"的帧访问原点为"null"的帧。协议、域和端口必须匹配"。
这是代码
<script type="text/javascript" src="../js/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function () {
$('#mainframe').load(function () {
var cont_height = $(this).contents().height();
alert(cont_height);
$(this).height(cont_height);
});
});
</script>
我尝试使用"$(window).load"而不是文档就绪,但我认为这不是时间问题,由于权限或其他原因,我无法访问数据。我真的很感激你能给我的任何提示。解决方案也在javascript中。
这是我发现的根据内容调整 iframe 大小的最佳方法。
<script>
function resizeMe(id) {
var theFrame = document.getElementById(id);
var theBody = (theFrame.contentWindow.document.body || theFrame.contentDocument.body)
var newHeight = Math.max(theBody.scrollHeight, theBody.offsetHeight, theBody.clientHeight);
theFrame.height = (newHeight + "px");
}
</script>
<iframe id="helloworld" ... onload="resizeMe('helloworld')"></iframe>
您可以让 iframe 文档使用 parent.resizeMe('helloworld') 调用父文档。
<body onload="parent.resizeMe('helloworld')">
...
</body>
或者因为你有jquery...
<body>
...
...
<script>
$(document).ready(function(){
parent.resizeMe('helloworld');
});
</script>
</body>
相关文章:
- 获取iframe内容的宽度-高度
- 使用javascript设置iframe的高度
- iframe上的100%自动高度
- 设置iFrame的高度
- 调整追加的 iframe 的高度
- 动态增加 iframe 高度
- 调整不同域上iframe的高度
- iframe高度100%不起作用
- 多个页面 iframe,高度加载
- 当内容显示在FireFox的iFrame中时,jQuery高度问题
- 加载新内容时调整iframe的高度
- 动态iframe高度-似乎需要重新加载页面
- 如何告诉 iframe 将图像链接调整为给定的宽度和高度
- 根据提交单击动态调整 iFrame 的高度
- 根据内容设置 iFrame 宽度和高度
- 如何更改其内容的 Iframe 高度(两者都来自同一域)
- 更改花式框iframe的大小-我可以更改宽度,但不能更改高度
- iFrame 不会扩展到完整的内容高度,即使有 jQuery 脚本以它为目标
- 同位素布局中的动态iframe高度
- iFrame - 在 iFrame 中更改内容时自动设置高度