我正在我的网站上打开我的博客页面。问题是我可以给 iframe 一个宽度，但高度应该是动态的，这样 iframe 中就没有滚动条，它看起来像一个页面......
我已经尝试了各种 JavaScript 代码来计算内容的高度，但所有这些都给出了访问被拒绝的权限错误并且没有用。
<iframe src="http://bagtheplanet.blogspot.com/" name="ifrm" id="ifrm" width="1024px" ></iframe>
我们可以使用 Ajax 计算高度或使用 PHP 吗？
直接回答你的两个子问题：不，你不能用 Ajax 做这件事，也不能用 PHP 计算它。
我过去所做的是使用 iframe 页面中的触发器window.onload（不是domready，因为加载图像可能需要一段时间）将页面的主体高度传递给父级。
<body onload='parent.resizeIframe(document.body.scrollHeight)'>
然后parent.resizeIframe看起来像这样：
function resizeIframe(newHeight)
{
document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}
瞧，你有一个强大的调整器，它会在页面完全呈现后触发，没有讨厌的contentdocumentvscontentWindow摆弄:)
当然，现在人们会首先在默认高度看到您的 iframe，但这可以通过首先隐藏您的 iframe 并仅显示“加载”图像来轻松处理。然后，当resizeIframe函数启动时，在其中添加两行额外的行来隐藏加载图像，并显示仿 Ajax 外观的 iframe。
当然，这只适用于同一个域，因此您可能希望有一个代理 PHP 脚本来嵌入这些东西，一旦您到达那里，您不妨直接将您博客的 RSS 提要使用 PHP 嵌入到您的站点中。
你可以用 JavaScript 做到这一点。
document.getElementById('foo').height = document.getElementById('foo').contentWindow.document.body.scrollHeight + "px";
拟合 IFRAME 内容在 Google 上很容易找到。这是一种解决方案：
<script type="text/javascript">
function autoIframe(frameId) {
try {
frame = document.getElementById(frameId);
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 10;
}
catch(err) {
window.status = err.message;
}
}
</script>
这当然不能解决您遇到的跨域问题...document.domain如果这些站点位于同一位置，则设置可能会有所帮助。如果您使用 iframe 随机站点，我认为没有解决方案。
这是我使用 MooTools 解决问题的方法，该工具适用于 Firefox 3.6、Safari 4.0.4 和 Internet Explorer 7：
var iframe_container = $('iframe_container_id');
var iframe_style = {
height: 300,
width: '100%'
};
if (!Browser.Engine.trident) {
// IE has hasLayout issues if iframe display is none, so don't use the loading class
iframe_container.addClass('loading');
iframe_style.display = 'none';
}
this.iframe = new IFrame({
frameBorder: 0,
src: "http://www.youriframeurl.com/",
styles: iframe_style,
events: {
'load': function() {
var innerDoc = (this.contentDocument) ? this.contentDocument : this.contentWindow.document;
var h = this.measure(function(){
return innerDoc.body.scrollHeight;
});
this.setStyles({
height: h.toInt(),
display: 'block'
});
if (!Browser.Engine.trident) {
iframe_container.removeClass('loading');
}
}
}
}).inject(iframe_container);
设置“加载”类的样式以在 iframe 容器的中间显示 Ajax 加载图形。然后对于Internet Explorer以外的浏览器，一旦其内容加载完成并删除加载图形，它将显示全高IFRAME。
下面是我的onload事件处理程序。
我在jQuery UI对话框中使用 IFRAME 。不同的用法需要做一些调整。这似乎对我（目前）在 Internet Explorer 8 和 Firefox 3.5 中有用。它可能需要一些额外的调整，但总体思路应该很清楚。
function onLoadDialog(frame) {
try {
var body = frame.contentDocument.body;
var $body = $(body);
var $frame = $(frame);
var contentDiv = frame.parentNode;
var $contentDiv = $(contentDiv);
var savedShow = $contentDiv.dialog('option', 'show');
var position = $contentDiv.dialog('option', 'position');
// disable show effect to enable re-positioning (UI bug?)
$contentDiv.dialog('option', 'show', null);
// show dialog, otherwise sizing won't work
$contentDiv.dialog('open');
// Maximize frame width in order to determine minimal scrollHeight
$frame.css('width', $contentDiv.dialog('option', 'maxWidth') -
contentDiv.offsetWidth + frame.offsetWidth);
var minScrollHeight = body.scrollHeight;
var maxWidth = body.offsetWidth;
var minWidth = 0;
// decrease frame width until scrollHeight starts to grow (wrapping)
while (Math.abs(maxWidth - minWidth) > 10) {
var width = minWidth + Math.ceil((maxWidth - minWidth) / 2);
$body.css('width', width);
if (body.scrollHeight > minScrollHeight) {
minWidth = width;
} else {
maxWidth = width;
}
}
$frame.css('width', maxWidth);
// use maximum height to avoid vertical scrollbar (if possible)
var maxHeight = $contentDiv.dialog('option', 'maxHeight')
$frame.css('height', maxHeight);
$body.css('width', '');
// correct for vertical scrollbar (if necessary)
while (body.clientWidth < maxWidth) {
$frame.css('width', maxWidth + (maxWidth - body.clientWidth));
}
var minScrollWidth = body.scrollWidth;
var minHeight = Math.min(minScrollHeight, maxHeight);
// descrease frame height until scrollWidth decreases (wrapping)
while (Math.abs(maxHeight - minHeight) > 10) {
var height = minHeight + Math.ceil((maxHeight - minHeight) / 2);
$body.css('height', height);
if (body.scrollWidth < minScrollWidth) {
minHeight = height;
} else {
maxHeight = height;
}
}
$frame.css('height', maxHeight);
$body.css('height', '');
// reset widths to 'auto' where possible
$contentDiv.css('width', 'auto');
$contentDiv.css('height', 'auto');
$contentDiv.dialog('option', 'width', 'auto');
// re-position the dialog
$contentDiv.dialog('option', 'position', position);
// hide dialog
$contentDiv.dialog('close');
// restore show effect
$contentDiv.dialog('option', 'show', savedShow);
// open using show effect
$contentDiv.dialog('open');
// remove show effect for consecutive requests
$contentDiv.dialog('option', 'show', null);
return;
}
//An error is raised if the IFrame domain != its container's domain
catch (e) {
window.status = 'Error: ' + e.number + '; ' + e.description;
alert('Error: ' + e.number + '; ' + e.description);
}
};