我的原网页地址是 a.com，并且你想要在该网站上嵌入一个来自其他域的 iframe（例如 b.com），并使其高度根据内容动态调整，你需要在两个网站上分别进行配置。

在源网页中

监听高度变化:
使用 window.addEventListener(‘resize’, function) 监听窗口大小变化。
或使用 MutationObserver 监听DOM变化。
发送高度信息:
计算 document.body.scrollHeight 或 document.documentElement.scrollHeight 。
使用 window.parent.postMessage(height, ‘*’) 发送高度信息到父窗口。

在嵌入iframe的网页中

接收消息并调整iframe高度:
使用 window.addEventListener(‘message’, function) 接收消息。
确保消息来源安全并来自预期的源。
根据接收到的数据调整iframe的 style.height 。

示例代码

源网页（被嵌入的页面）:a.com

1
2
3
4
5
6
7
8
<script>
function sendHeight() {
    var height = document.body.scrollHeight;
    window.parent.postMessage(height, 'https://b.com');
}
window.addEventListener('resize', sendHeight);
sendHeight();
</script>

嵌入iframe的网页:b.com

1
2
3
4
5
6
7
8
<script>
window.addEventListener('message', function(event) {
    if (event.origin === "https://b.com") {
        var iframe = document.getElementById('iframe');
        iframe.style.height = event.data + 'px';
    }
});
</script>

iframe代码

1
2
<iframe id="iframe" src="https://b.com/" scrolling="no" frameborder="0" width="100%">
</iframe>

隐藏class或id元素

1
2
3
.nav.navbar-nav.navbar-right {
    display: none;
}