如何获取iframe里面iframe的高度
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何获取iframe里面iframe的高度相关的知识，希望对你有一定的参考价值。
参考技术A 用javascript不就可以吗？例如：
<!DOCTYPE html>
<html>
<head>
<title>用js获取iframe元素的宽高</title>
</head>
<body>
<iframe id="myiframe" width="200" height="100">
<p>xkl</P>
</iframe>
</body>
<script>
var myiframe = document.getElementById("myiframe");
alert(myiframe.width);
alert(myiframe.height);
</script>
</html>
================================================
javascript代码一般写到后面，这样可以等html页面Dom元素加载好之后再运行，
不过写到前面也可以，可以用window.onload = function()代码体括起来本回答被提问者和网友采纳
如何使用 javascript 从 iframe 内部获取 iframe 的高度？具有多个 iframe 的页面呢？
【中文标题】如何使用 javascript 从 iframe 内部获取 iframe 的高度？具有多个 iframe 的页面呢？【英文标题】：How to get the height of an iframe with javascript from inside the iframe? What about pages with multiple iframes? 【发布时间】：2011-07-02 12:25:26 【问题描述】：有没有办法通过从 iframe 内部执行脚本来检测 iframe 的高度和宽度？ 我需要根据 iframe 的不同高度/宽度来动态定位 iframe 中的一些元素。
如果同一页面中有多个 iframe，会有什么不同吗？即每个 iframe 都想找到自己的尺寸。
欢迎使用 Javascript 或 jquery 解决方案。
谢谢！
<iframe src='http://example.com' width='640' height='480' scrolling='no' frameborder='0' longdesc='http://example.com'></iframe>
iframe 必须嵌入其他网站，正如以下答案之一所述，我遇到了权限问题。
【问题讨论】：
【参考方案1】：如果您的 iframe 页面及其父页面是从不同的域提供的（这意味着您无法从 iframe 页面访问父页面的 DOM 属性），那么我认为这与您尝试解决视口高度。
对此，请参阅：
Get the browser viewport dimensions with JavaScript或者可能是这样的：
http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/【讨论】：
谢谢，这给出了 iframe 的尺寸属性。正是我需要的。 window.innerWidth & window.innerHeight 应该也是一个不错的选择。【参考方案2】：请注意这样的代码：
var thisIframesHeight = window.parent.$("iframe.itsID").height();
只有当 iframe 和父窗口的源来自同一个域时才会安全。如果不是，您将遇到权限被拒绝的问题，您将不得不采取另一种方法。
【讨论】：
是的，我遇到了权限问题，因为 iframe 嵌入了其他站点。有没有其他办法？ @VKen：这早就过期了，但是有window.postMessage 可以用来在内部和外部脚本范围之间进行通信，以防它们具有不同的来源。
@RobertKoritnik：谢谢！经过这么多年，我今天学到了一些新东西！ caniuse.com/#feat=x-doc-messaging 和 developer.mozilla.org/en-US/docs/Web/API/Window/postMessage【参考方案3】：
可能有点晚了，因为所有其他答案都较旧:-) 但是......这是我的解决方案。在实际的 FF、Chrome 和 Safari 5.0 中测试。
css:
iframe border:0; overflow:hidden;
javascript：
$(document).ready(function()
$("iframe").load( function ()
var c = (this.contentWindow || this.contentDocument);
if (c.document) d = c.document;
$(this).css(
height: $(d).outerHeight(),
width: $(d).outerWidth()
);
);
);
希望这对任何人都有帮助。
【讨论】：
如果不是 c.document，d 是未定义的【参考方案4】：我想每个<iframe> 都需要一个id。然后在<iframe> 中你会这样引用它：
var thisIframesHeight = window.parent.$("iframe#itsID").height();
【讨论】：
嗨，我认为这个答案很好。你还知道其他不需要ID的方法吗？ 不，我不这么认为，如果您在<iframe> 内部工作，则不会。如果您正在使用父文档，那么可以，还有其他几种方法。【参考方案5】：
是的，你可以从框架内部执行父窗口函数，并传递参数，像这样：
window.parent.FUNC_NAME(iframe_height,iframe_width)
记得在父窗口中定义函数 FUNC_NAME
【讨论】：
以上是关于如何获取iframe里面iframe的高度的主要内容，如果未能解决你的问题，请参考以下文章