更改另一个页面中另一个div的CSS属性

时间:2017-08-14 14:53:14

标签: javascript jquery

你好我想改变一个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");
    });

我正在尝试当我点击按钮时希望位于第二页上以更改第一页上文字的颜色

1 个答案:

答案 0 :(得分:2)

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

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

然后在另一页,等待消息:

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

我假设两个窗口都在同一台机器上打开,如果没有,你需要ajax或websockets代替服务器代理。