我正在寻找一个很好的跨域 iframe 调整大小脚本，该脚本根据其内容调整其高度。我也可以访问 iframe 源的 html/css。外面有吗？
跨域 iframe 调整器？
IT技术
javascript
iframe
iframe-resizer
2021-02-04 01:40:15
6个回答
如果您的用户使用现代浏览器，您可以使用HTML5 中的 postMessage轻松解决这个问题。这是一个运行良好的快速解决方案：
iframe 页面：
<!DOCTYPE html>
<head>
</head>
<body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');">
<h3>Got post?</h3>
<p>Lots of stuff here which will be inside the iframe.</p>
</body>
</html>
包含 iframe 的父页面（并想知道其高度）：
<script type="text/javascript">
function resizeCrossDomainIframe(id, other_domain) {
var iframe = document.getElementById(id);
window.addEventListener('message', function(event) {
if (event.origin !== other_domain) return; // only accept messages from the specified domain
if (isNaN(event.data)) return; // only accept something which can be parsed as a number
var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar
iframe.height = height + "px";
}, false);
}
</script>
<iframe src='http://example.com/page_containing_iframe.html' id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');">
</iframe>
未能找到处理所有不同用例的解决方案，我最终编写了一个简单的 js lib，它支持宽度和高度，在一页上调整内容大小和多个 iframe。
此页面上的第一个脚本 - 在 HTML5 中使用 postMessage 的脚本 - 也适用于移动设备上的 iframe - 通过将 iframe 调整为内容 - 例如联合跨域 - 您可以轻松地在 iphone 或 android 中滚动，但方式并非如此否则可能使用 iframe
经过一些研究，我最终使用了包含在jQuery 插件中的html5 消息传递机制，这使其与使用各种方法的旧浏览器兼容（本线程中描述了其中一些）。
最终的解决方案非常简单。
在主机（父）页面上：
// executes when a message is received from the iframe, to adjust
// the iframe's height
$.receiveMessage(
function( event ){
$( 'my_iframe' ).css({
height: event.data
});
});
// Please note this function could also verify event.origin and other security-related checks.
在 iframe 页面上：
$(function(){
// Sends a message to the parent window to tell it the height of the
// iframe's body
var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
$.postMessage(
$('body').outerHeight( true ) + 'px',
'*',
target
);
});
我已经在 XP 和 W7 上的 Chrome 13+、Firefox 3.6+、IE7、8 和 9、OSX 和 W7 上的 safari 上测试过这个。;)