javascript - 我可以使用一个页面上的按钮的单击来更改不同页面上的图像源吗？杰斯

Question

我已经设置了一个页面，供用户通过单击按钮来更改顶级显示页面。如果需要，这会将绿色圆圈更改为红色圆圈。该按钮位于与主页不同的页面上，这可以吗？我将所有内容都放在同一个文件夹中，两个页面都链接到同一个 .js 文件。我认为下面的函数可以解决问题，但没有什么乐趣。谢谢。

控制页面1:

<input type="button" value="Hard Down!" id="Button" onclick="change();">

显示第2页:

<img id="greenCircle" alt= "Circle" src="green.PNG">

功能:

function change() {
var image = document.getElementById("greenCircle");
image.src = "red.png"
}

Answer 1

您可以使用localStorage在选项卡之间进行通信(具有相同的域)。在一个选项卡上设置它会传播到所有其他选项卡。检查以下代码片段。

页面A

$('button').on('click',function(){
  localStorage.setItem('img_src','red.png')
});

B页

addEvent(window, 'storage', function (event) {
  if (event.key == 'img_src') {
    // do your dom manipulation using event.newValue
  }
});