求助：如何通过page1按钮修改page2中HTML元素颜色？当前实现失效

你遇到的问题其实很典型：page1和page2是两个独立的浏览器页面/标签页，它们各自拥有完全独立的DOM上下文和JavaScript运行环境。所以page1里的document.querySelector(".example")只能查找当前页面（page1）的元素，自然找不到page2里的内容，修改也就无效了。

下面根据不同的场景给你几个可行的解决方案：

场景1：page2是从page1打开的（比如用弹窗/新标签页打开） #

这种情况可以直接保存page2的窗口引用，等它加载完成后再修改DOM：

修改page1的代码：

<!-- page1.html -->
<button onclick="openAndModifyPage2()">Try it</button>
<script>
// 保存page2的窗口引用
let page2Window;

function openAndModifyPage2() {
  // 打开page2，第二个参数是窗口名称（可以自定义）
  page2Window = window.open('page2.html', 'page2Window');
  
  // 必须等page2加载完成才能操作它的DOM
  page2Window.onload = function() {
    page2Window.document.querySelector(".example").style.backgroundColor = "red";
  };
}
</script>

场景2：两个页面是独立打开的（没有直接的打开关系） #

这种情况可以用同源页面共享的localStorage配合存储事件监听来实现通信：

修改page1的代码： #

<!-- page1.html -->
<button onclick="sendColorCommand()">Try it</button>
<script>
function sendColorCommand() {
  // 把要修改的颜色存入localStorage
  localStorage.setItem('targetBgColor', 'red');
}
</script>

修改page2的代码： #

<!-- page2.html -->
<h2 class="example">A heading with class="example"</h2>
<script>
// 监听localStorage的变化事件
window.addEventListener('storage', function(e) {
  // 只处理我们关心的存储键
  if (e.key === 'targetBgColor') {
    // 修改当前页面的元素颜色
    document.querySelector(".example").style.backgroundColor = e.newValue;
    // 可选：用完后清除这个存储项，避免下次误触发
    localStorage.removeItem('targetBgColor');
  }
});
</script>

原理是：同源的页面共享localStorage，当page1修改它时，page2会收到storage事件，从而执行修改操作。

场景3：page2是作为iframe嵌入在page1中的 #

这种情况可以直接通过iframe的contentWindow访问它的DOM：

修改page1的代码：

<!-- page1.html -->
<button onclick="modifyIframeElement()">Try it</button>
<!-- 嵌入page2的iframe -->
<iframe src="page2.html" id="page2Frame"></iframe>
<script>
function modifyIframeElement() {
  const page2Frame = document.getElementById('page2Frame');
  // 确保iframe已经加载完成
  if (page2Frame.contentWindow.document.readyState === 'complete') {
    page2Frame.contentWindow.document.querySelector(".example").style.backgroundColor = "red";
  } else {
    // 如果还没加载完，等加载完成后再执行
    page2Frame.onload = function() {
      page2Frame.contentWindow.document.querySelector(".example").style.backgroundColor = "red";
    };
  }
}
</script>

你可以根据自己的实际使用场景选择对应的方案，这些方法都能解决跨页面修改元素的问题~

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