Question

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

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

现在这两个页面在不同的标签上打开。我想要发生的是，只要点击第1页上的按钮，第2页上的输入文本的值将变为“世界”。如何使用Javascript或Jquery实现这一点？

Answer 1

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

同时第二个标签将是＆＃34; listen＆＃34;更改localStorage值：

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

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

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

Answer 2

您无法直接从一个标签访问另一个标签。那将是一个严重的安全问题。

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

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

Answer 3

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

Answer 4

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

更改其他页面的元素属性

4 个答案: