如何用JS/jQuery实现跨HTML页面按钮点击显示隐藏div

没问题，这个需求其实就是跨frame操作DOM的典型场景，我给你补全所有代码并解释清楚实现逻辑：

1. main.html（主框架页面） #

首先要给每个frame添加name属性，这样我们能精准定位到目标frame：

<html>
<head>
    <title>主框架页面</title>
</head>
<frameset rows="50%,50%" cols="*">
    <!-- 给第一个frame命名为frame1，对应1.html -->
    <frame src="1.html" name="frame1"/>
    <!-- 给第二个frame命名为frame2，对应2.html -->
    <frame src="2.html" name="frame2"/>
</frameset>
<!-- 注意：frameset页面不需要body标签，浏览器会自动处理 -->
</html>

2. 1.html（包含隐藏div的页面） #

这里我们创建一个初始隐藏的div，给它设置唯一的id方便查找：

<html>
<head>
    <title>页面1</title>
</head>
<body>
    <!-- 初始状态隐藏的div -->
    <div id="targetDiv" style="display: none; padding: 20px; background: #f0f0f0;">
        我是原本隐藏的内容，现在显示出来啦！
    </div>
</body>
</html>

3. 2.html（包含控制按钮的页面） #

在这个页面的按钮点击事件里，我们通过父窗口的frames集合获取到frame1的window对象，然后找到目标div并修改它的显示状态：

<html>
<head>
    <title>页面2</title>
    <script>
        function showHiddenDiv() {
            // 获取父窗口中名为frame1的frame对应的window对象
            const frame1Window = parent.frames['frame1'];
            // 在frame1的window中查找目标div
            const targetDiv = frame1Window.document.getElementById('targetDiv');
            // 修改div的display属性为block，使其显示
            if (targetDiv) {
                targetDiv.style.display = 'block';
            }
        }
    </script>
</head>
<body>
    <!-- 点击这个按钮触发显示操作 -->
    <button onclick="showHiddenDiv()">显示页面1中的隐藏内容</button>
</body>
</html>

关键知识点解释 #

• 跨frame访问原理：每个frame都是独立的window实例，要操作其他frame的DOM，必须通过parent.frames[frameName]获取到目标frame的window对象，再通过这个对象访问其内部的document。
• 同源策略限制：这三个页面必须处于同一域名、同一协议、同一端口下，否则浏览器会阻止跨frame的DOM操作（同源安全策略）。
• jQuery实现方案（可选）：如果你想用jQuery，只需要修改2.html的点击事件：

function showHiddenDiv() {
    // 通过jQuery访问frame1中的div
    $(parent.frames['frame1'].document).find('#targetDiv').show();
}

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