javascript - 更改位于另一个页面中的另一个 div 的 CSS 属性

Question

您好，我想更改 html 页面的 DOM，但从另一个页面我尝试在两个页面之间共享相同的脚本，但它不起作用，这里是我正在尝试执行的操作的说明

1-首页

<div>
<p id="simpletext">Hello world</p>
<script src="jquery.min.js"></script>
<script src="script.js" type ="text/javascript"></script> <!-- same script file is present in the second page -->
</div>

2秒页

<div>
<button>Click me </button>
<script src="jquery.min.js"></script>
<script src="script.js" type ="text/javascript"></script><!-- same script file is present in the first page -->
</div>

script.js

 $("button").on("click",function(){
    $("simpletext").css("color","blue");
    });

当我单击希望位于第二页上的按钮时，我试图更改第一页上文本的颜色

Answer 1

您可以将消息从一个页面发送到另一页面。在按钮一侧发送消息:

 $("button").on("click",function(){
   wondow.postMessage("show","*");
});

然后在另一个页面，等待消息:

 window.addEventListener("message",function(event){
   if(event.data === "show") {
     $("simpletext").css("color","blue");
   }
});

我假设两个窗口都在同一台计算机上打开，如果没有，您需要 ajax 或 websockets 并进行服务器端代理。