javascript - 将类添加到不同页面上的元素

Question

我有一个 html 页面 foo.html 和 bar.html。

我想要一个 foo.html 上的按钮/链接来将一个类添加到 bar.html 上的 div。执行此操作的 javascript 或 jQuery 是什么？

/foo.html

<a id="view1" onclick="addClass()" class="btn">View details »</a>

/bar.html

<div id="collapseThree" class="panel-collapse collapse"><div>

/foo.js

function addClass() {
    ???
}

编辑:

我可以使用任何东西，只要重定向到不同的页面设置 div 的类即可。

Answer 1

是的，您可以使用 cookies、localStorage 或 postMessage 在页面之间进行通信，但无法直接访问其他页面的 DOM。

试试这个:检查每个 Xms 是否 localStorage 已更改(非常丑陋的解决方案，但无需服务器端脚本即可工作；))

foo.js(附在两个文件中):

// apply to /foo.html
function addClass() {// toggleClass to be exact
  // set localStorage['collapse'] to 1 or 0 
  localStorage['collapse'] = localStorage['collapse'] ? 0 : 1;
}
// apply to /bar.html
(function() {
  var element = $('#collapseThree');
  if(element.length) {
    setInterval(function() {
      // when localStorage['collapse'] is 1, add class .collapse
      // other way: remove class collapse
      element.toggleClass('collapse', !!(localStorage['collapse'] || 0));
    }, 500);
  }
})();

你可以做得更聪明，用window.onfocus代替setInterval，这取决于你的需要