3

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

第 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">

脚本.js

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

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

4

4 回答 4

6

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

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

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

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

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

于 2013-10-07T18:10:30.657 回答
0

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

  • 您可以使用 cookie 在两个页面之间进行通信（假设它们都在您的控制之下）。请参阅有关该主题的其他 SO 问题。
  • 假设您只针对现代浏览器，您还可以使用 LocalStorage API。看到这个答案。

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

于 2013-10-07T18:10:21.093 回答
0

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

于 2013-10-07T18:11:49.337 回答
0

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

于 2013-10-07T18:13:31.587 回答