我正在尝试将iframe height参数更改为iframe中正在加载的页面的相同px。在iframe中加载的页面来自另一个域。
iframe内部会加载不同的页面，导致iframe内容的高度发生变化，因此我需要获取iframe内容高度并将其应用于iframe height参数。
这是我正在谈论的一个例子：http://jsfiddle.net/R7Yz9/3/
<div class="site"><a href="http://amazon.com/" target="_top">Amazon </a></div>
<div class="site"><a href="http://cnn.com/" target="_top">Cnn </a></div>
<div class="site"><a href="http://wikipedia.org/" target="_top">Wikipedia </a></div>
<iframe id="source" src="http://amazon.com/" frameborder="0" scrolling="no" width="100%" height="100%"></iframe>
$(document).ready(function() {
var iframe = $( "#source" );
$( "a[target=_top]" ).click( function(){
iframe.attr( "src", this.href );
return false;
});
});
答案 0 :(得分：27)
这是一个小型库，它解决了将iFrame调整为包含内容的所有问题。
https://github.com/davidjbradshaw/iframe-resizer
它通过使用post-message API处理跨域问题，并且还以几种不同的方式检测iFrame内容的更改。
适用于所有现代浏览器和IE8以上版本。
编辑：为了确定跨域iframe高度，您还必须有权在iframe的页面上实现脚本。
答案 1 :(得分：8)
最小跨域集我用于在页面上嵌入适合的单个iframe。
在嵌入页面（包含iframe）上：
<iframe frameborder="0" id="sizetracker" src="http://www.hurtta.com/Services/SizeTracker/DE" width="100%"></iframe>
<script type="text/javascript">
// Create browser compatible event handler.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen for a message from the iframe.
eventer(messageEvent, function(e) {
if (isNaN(e.data)) return;
// replace #sizetracker with what ever what ever iframe id you need
document.getElementById('sizetracker').style.height = e.data + 'px';
}, false);
</script>
在嵌入页面（iframe）上：
<script type="text/javascript">
function sendHeight()
{
if(parent.postMessage)
{
// replace #wrapper with element that contains
// actual page content
var height= document.getElementById('wrapper').offsetHeight;
parent.postMessage(height, '*');
}
}
// Create browser compatible event handler.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen for a message from the iframe.
eventer(messageEvent, function(e) {
if (isNaN(e.data)) return;
sendHeight();
},
false);
</script>
答案 2 :(得分：3)
您可以获得iframe的内容高度，例如像这样：
document.getElementById('iframe-id').contentWindow.document.body.scrollHeight
更新
但跨域可能存在问题。以下是一些显示不同方法的来源：
http://css-tricks.com/cross-domain-iframe-resizing/
How to get height of iframe cross domain
Resize iframe height according to content height
Resizing an iframe based on content
Get value of input field inside an iframe
注意：后者显示了如何访问字段，但访问体高的原理是相同的
答案 3 :(得分：3)
您还需要在要进行格式化的网站上也具有访问权限。我在这里找到了最佳解决方案：https://gist.github.com/MateuszFlisikowski/91ff99551dcd90971377
yourotherdomain.html
<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript'>
// Size the parent iFrame
function iframeResize() {
var height = $('body').outerHeight(); // IMPORTANT: If body's height is set to 100% with CSS this will not work.
parent.postMessage("resize::"+height,"*");
}
$(document).ready(function() {
// Resize iframe
setInterval(iframeResize, 1000);
});
</script>
使用iframe的网站
<iframe src='example.html' id='edh-iframe'></iframe>
<script type='text/javascript'>
// Listen for messages sent from the iFrame
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
// If the message is a resize frame request
if (e.data.indexOf('resize::') != -1) {
var height = e.data.replace('resize::', '');
document.getElementById('edh-iframe').style.height = height+'px';
}
} ,false);
</script>
答案 4 :(得分：1)
javascript中没有选项可以找到跨域iframe高度的高度，但是你可以借助一些服务器端编程来完成这样的事情。我在这个例子中使用了PHP
<code>
<?php
$output = file_get_contents('http://yourdomain.com');
?>
<div id='iframediv'>
<?php echo $output; ?>
</div>
<iframe style='display:none' id='iframe' src="http://yourdomain.com" width="100%" marginwidth="0" height="100%" marginheight="0" align="top" scrolling="auto" frameborder="0" hspace="0" vspace="0"> </iframe>
<script>
if(window.attachEvent) {
window.attachEvent('onload', iframeResizer);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
iframeResizer(evt);
};
window.onload = newonload;
} else {
window.onload = iframeResizer;
}
}
function iframeResizer(){
var result = document.getElementById("iframediv").offsetHeight;
document.getElementById("iframe").style.height = result;
document.getElementById("iframediv").style.display = 'none';
document.getElementById("iframe").style.display = 'inline';
}
</script>
</code>
答案 5 :(得分：1)
如果您有权操作要加载的网站的代码，则以下内容应提供一种全面的方法，以便在框架内容的高度发生变化时随时更新iframe容器的高度。
将以下代码添加到要加载的页面中（可能在标题中）。每次更新DOM时，此代码都会发送一条包含HTML容器高度的消息（如果您正在加载延迟），或者调整窗口大小（当用户修改浏览器时）。
window.addEventListener("load", function(){
if(window.self === window.top) return; // if w.self === w.top, we are not in an iframe
send_height_to_parent_function = function(){
var height = document.getElementsByTagName("html")[0].clientHeight;
//console.log("Sending height as " + height + "px");
parent.postMessage({"height" : height }, "*");
}
// send message to parent about height updates
send_height_to_parent_function(); //whenever the page is loaded
window.addEventListener("resize", send_height_to_parent_function); // whenever the page is resized
var observer = new MutationObserver(send_height_to_parent_function); // whenever DOM changes PT1
var config = { attributes: true, childList: true, characterData: true, subtree:true}; // PT2
observer.observe(window.document, config); // PT3
});
将以下代码添加到存储iframe的页面。这将更新iframe的高度，因为该消息来自iframe加载的页面。
<script>
window.addEventListener("message", function(e){
var this_frame = document.getElementById("healthy_behavior_iframe");
if (this_frame.contentWindow === e.source) {
this_frame.height = e.data.height + "px";
this_frame.style.height = e.data.height + "px";
}
})
</script>