根据其中的内容高度调整 iframe 高度

php javascript ajax iframe

2022-08-30 08:56:19

我正在我的网站上打开我的博客页面。问题是我可以给iframe一个宽度，但高度应该是动态的，这样iframe中没有滚动条，它看起来像一个页面......

我已经尝试了各种JavaScript代码来计算内容的高度，但所有这些都给出了拒绝访问的权限错误，并且没有用处。

<iframe src="http://bagtheplanet.blogspot.com/" name="ifrm" id="ifrm" width="1024px" ></iframe>

我们可以使用Ajax来计算高度还是使用PHP？

答案 1

直接回答你的两个子问题：不，你不能用Ajax做到这一点，也不能用PHP计算它。

我过去所做的是使用来自iframe'd页面的触发器（不是，因为加载图像可能需要一段时间）将页面的正文高度传递给父级。window.onloaddomready

<body onload='parent.resizeIframe(document.body.scrollHeight)'>

然后看起来像这样：parent.resizeIframe

function resizeIframe(newHeight)
{
    document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}

瞧，你有一个强大的调整器，一旦页面完全呈现，就会触发，没有令人讨厌的与摆弄:)contentdocumentcontentWindow

当然，现在人们会首先以默认高度看到您的iframe，但这可以通过首先隐藏您的iframe并仅显示“加载”图像来轻松处理。然后，当函数启动时，在其中放置两行额外的行，以隐藏加载图像，并显示假Ajax外观的iframe。resizeIframe

当然，这仅适用于同一域，因此您可能希望有一个代理PHP脚本来嵌入这些东西，一旦您到达那里，您不妨使用PHP将博客的RSS源直接嵌入您的网站。

答案 2

你可以用JavaScript做到这一点。

document.getElementById('foo').height = document.getElementById('foo').contentWindow.document.body.scrollHeight + "px";