更改另一个页面的元素属性答案

【问题标题】：Change element attribute of another page更改另一个页面的元素属性
【发布时间】：2013-10-14 10:09:14
【问题描述】：

大家好，我的网站有问题。情况如下：

第 1 页

<script type="text/javascript" src="jscript.js">
<input type="button" value="change" onClick="changeAttr()">

第 2 页

<script type="text/javascript" src="jscript.js">
<input type="text" value="Hello" id="dynamictext">

jscript.js

function changeAttr(){
document.getElemenyById('dynamictext').value="World";
}

现在这 2 个页面在不同的选项卡上打开。我想要发生的是，每当单击第 1 页上的按钮时，第 2 页上的输入文本的值将更改为“世界”。如何使用 Javascript 或 Jquery 实现这一点？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您不能直接从一个选项卡访问 DOM 元素到另一个选项卡。这将是一个严重的安全问题。

您可以使用 cookie 在两个页面之间进行通信（假设它们都在您的控制之下）。有关该主题，请参阅 this other SO question。
您也可以使用 LocalStorage API，假设您只针对现代浏览器。见this SO answer。

这两种方法都允许您共享数据。然后，您必须定义自己的协议，以便根据接收到的命令来操作 DOM。

【讨论】：

w = window.open('/same-domain', '_blank'); w.window.document.body.innerHTML = 'this totally works' 符合同源策略，从代码打开，不是安全问题。
假设第一个选项卡打开第二个选项卡。 OP没有提到这一点。
我在回复您的声明：“您不能直接从一个选项卡访问 DOM 元素到另一个选项卡。”关键是您进行了错误的概括。

【解决方案2】：

第一个选项卡的任务是更改 localStorage 中的值。 localStorage.setItem('superValue', 'world');

同时，第二个选项卡将“监听”该 localStorage 值的更改：

var dinamictext = document.querySelector('dinamictext');

setInterval(function () {
    if (dinamictext.value !== localStorage['superValue']) {
        dinamictext.value = localStorage['superValue'];
    }
}, 100);

这当然只适用于同一域中的页面。

【讨论】：

【解决方案3】：

您可以使用 HTML5 存储。 Here 是一个简单的例子

【讨论】：

【解决方案4】：

如果两个页面都属于同一个站点，则其他答案是完美的。但是，如果它们不在同一个站点上，则您需要一个服务器解决方案。一个页面将向服务器发送请求，而另一个页面也必须调用服务器寻找指令，并在收到时执行这些指令。在这种情况下，如果它们位于不同的站点上，AJAX 可能无法工作，您必须求助于 JSONP 之类的东西。

【讨论】：