javascript 基于内部内容的 iframe 动态高度宽度变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3913167/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iframe dynamic height width change based on inner content
提问by Nithish
I have iframe with content like below,
我有内容如下的 iframe，
<iframe frameborder="no" src="http:localhost/com" id="iframe">
<div style="height:850px;width:700px;">div text </div>
</iframe>
This shows the iframe with hori. and vertical scroll but not the height on inner content of 850px.
这显示了带有 hori 的 iframe。和垂直滚动但不是 850px 内部内容的高度。
how can i change the iframe height dynamiclly based on inner content height n width. Im using jquery inside the content.
如何根据内部内容高度 n 宽度动态更改 iframe 高度。我在内容中使用 jquery。
Its cross domain js widget so most of the below answers throwing permission denied error
它的跨域 js 小部件，所以下面的大部分答案都抛出了权限被拒绝的错误
Thanxs, Nithish
谢谢，尼西什
回答by jim tollan
Nithish,
尼西什，
if you are using jquery, then you can easily find (and set) the height of any div (in your domain - not on external content) as such:
如果您使用的是 jquery，那么您可以轻松地找到（并设置）任何 div（在您的域中 - 而不是在外部内容上）的高度，如下所示：
// get the height - in case we want to factor it into the equation below!!
var myDivHeight = $('iframe').css('height');
// set the height
var docHeight = $(document).css('height');
$('iframe').css('height', docHeight);
hope this helps ...
希望这可以帮助 ...
回答by Marcelo
var newHeight = $("iframe[id='iframeAutenticador']").contents().find("html").height();
$("iframe[id='iframeAutenticador']").height(newHeight);
use this.
用这个。
回答by Pedro Gil
You should create a function to measure the height of the content, and set the IFrame height and then call the resize function when the content is loaded.
您应该创建一个函数来测量内容的高度，并设置 IFrame 高度，然后在加载内容时调用 resize 函数。
<SCRIPT LANGUAGE="JavaScript">
function resizeIframeToFitContent(iframe) {
// This function resizes an IFrame object
// to fit its content.
// The IFrame tag must have a unique ID attribute.
iframe.height = document.frames[iframe.id]
.document.body.scrollHeight;
}
</SCRIPT>
回答by Anpher
If domains are the same for both pages:
如果两个页面的域相同：
parent.document.getElementById("iframe").style.height = $(document).height()+"px";
You can use jQuery in parent page too (if its available there).
您也可以在父页面中使用 jQuery（如果在那里可用）。
回答by Blake Russell
I found this here: stackoverflow.com/questions/1145850/
我在这里找到了这个：stackoverflow.com/questions/1145850/
and expanded upon it to re-size width also...you just add this in your head:
并对其进行扩展以重新调整宽度大小……您只需将其添加到您的脑海中：
<script type="text/javascript">
function getDocHeight(doc) {
doc = doc || document;
// stackoverflow.com/questions/1145850/
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function getDocWidth(doc) {
doc = doc || document;
// stackoverflow.com/questions/1145850/
var body = doc.body, html = doc.documentElement;
var width = Math.max( body.scrollWidth, body.offsetWidth,
html.clientWidth, html.scrollWidth, html.offsetWidth );
return width;
}
function setIframeSize(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument:
ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height ...
ifrm.style.width = "10px"; // reset to minimal width ...
// IE opt. for bing/msn needs a bit added or scrollbar appears
ifrm.style.height = getDocHeight( doc ) + 4 + "px";
ifrm.style.width = getDocWidth( doc ) + 4 + "px";
ifrm.style.visibility = 'visible';
}
</script>
Then make sure you have a unique id in your iframe and call the SetIframeSize:
然后确保您的 iframe 中有一个唯一的 id 并调用 SetIframeSize：
<iframe src="source.html" id="uniqueid" onload="setIframeSize(this.id)"></iframe>
