如何用JavaScript修改另一个ASPX页面中iframe的高度？

你遇到的核心问题是子页面（screenMenux.aspx）无法直接通过自身的document对象访问父页面（body.aspx）的DOM元素，每个页面的document上下文都是独立的。另外还要注意函数名匹配和同源策略限制，以下是具体解决方案：

关键前提 #

两个页面必须同源（同协议、同域名、同端口），否则浏览器的同源策略会阻止跨页面DOM操作，这是浏览器的安全机制。

代码修改步骤 #

1. 修正跨页面DOM访问逻辑 #

在screenMenux.aspx的resize函数中，将原来的document.getElementById("mainframex")替换为访问父页面的document对象：

• 原生JS写法：parent.document.getElementById("mainframex")
• 如果父页面引入了jQuery，也可以用：parent.$("#mainframex")

2. 统一函数名 #

body.aspx中iframe的onload事件绑定的是resizeIframe(this)，但screenMenux.aspx中的函数名为resize(frame)，两者不匹配，需要统一：

• 要么把body.aspx的onload改为：onload="resize(this)"
• 要么把screenMenux.aspx的函数名改为：function resizeIframe(frame) {...}

3. 优化后的完整代码（原生JS版） #

function resize(frame) {
    // 获取子页面的body元素
    var body = frame.contentWindow.document.body || frame.contentDocument.body;
    // 用scrollHeight获取完整内容高度（比仅取body高度更可靠）
    var cHeight = body.scrollHeight;
    
    if (frame.oHeight !== cHeight) {
        // 先重置高度避免动画抖动
        frame.style.height = "0px";
        // 设置当前iframe的高度
        frame.style.height = cHeight + "px";
        frame.oHeight = cHeight;
        
        // 修改父页面中mainframex的高度
        var parentIframe = parent.document.getElementById("mainframex");
        if (parentIframe) {
            parentIframe.style.height = cHeight + "px";
        }
    }
}

4. 补充说明 #

• 用scrollHeight代替$(b).height()：scrollHeight会包含页面中超出视口的内容高度，能更准确匹配实际内容高度。
• 多层iframe嵌套处理：如果是多层嵌套的iframe，需要用top.document访问最顶层页面的DOM，而非parent。

内容的提问来源于stack exchange，提问作者Asfi