跨页面调用JavaScript函数求助：点击right.html修改left.html背景色

嘿，我来帮你搞定这个问题！你的代码目前有两个关键问题，一个是基础语法错误，另一个是浏览器的跨页面访问限制，咱们一步步拆解：

1. 语法错误：颜色值未加引号 #

你写的red没有用引号包裹，JavaScript会把它当成一个变量名，而不是颜色字符串。正确的写法应该是把颜色值放在单引号或双引号里：

function changecolor(){ 
  document.getElementById('left').style.background = 'red'; // 这里要加引号
}

不过即使修正了这个，你的代码仍然不会生效——因为还有更核心的跨页面访问问题。

2. 核心问题：跨页面无法直接访问DOM #

浏览器的同源策略和页面隔离机制决定了：每个独立的HTML页面（比如left.html和right.html）都有自己独立的全局环境和document对象。right页面里的JavaScript只能访问right页面内的元素，根本找不到left页面里的id="left"元素，所以document.getElementById('left')会返回null，自然无法修改背景色。

解决跨页面通信的可行方案 #

要实现两个页面的交互，你需要用浏览器支持的跨页面通信机制，这里给你推荐两种适合你的场景的方法：

方法一：使用localStorage监听变化（适合本地或同域名场景）

这种方法利用浏览器的本地存储API，一个页面修改存储值，另一个页面监听存储变化来触发动作：

• right.html的点击事件代码：

function changecolor() {
  // 把颜色值存入localStorage
  localStorage.setItem('targetBgColor', 'red');
}

• left.html的监听代码：

// 监听localStorage的变化
window.addEventListener('storage', function(e) {
  // 只处理我们关心的存储键
  if (e.key === 'targetBgColor') {
    document.getElementById('left').style.background = e.newValue;
  }
});

方法二：使用窗口间通信（如果页面是通过弹窗/iframe打开的）

如果你的left和right页面是在同一个浏览器窗口上下文里（比如left页面用window.open('right.html')打开right页面，或者其中一个是另一个的iframe），可以用窗口引用直接通信：

• 假设left页面打开right页面：

// left.html里打开right页面时保存窗口引用
const rightWindow = window.open('right.html');

• right页面里的点击事件可以通过window.opener访问left页面的DOM：

function changecolor() {
  // 确保opener存在（left页面没被关闭）
  if (window.opener) {
    window.opener.document.getElementById('left').style.background = 'red';
  }
}

注意：这种方法要求两个页面必须是同域名、同协议、同端口的，否则会被浏览器的同源策略阻止。

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