点击一个页面按钮在另一个页面显示文本

Question

我想点击一个页面的按钮，然后在另一个页面的p元素内显示文本，两个页面都引入和js，请问怎么才能成功？

Answer 1

根据你的描述，应该是两个同域（相同的协议、主机名、端口）的网页进行通讯，这样的话就可以通过 h5 的 localStorage 来实现。不需要通过服务端。

1、当 a 页面的按钮点击之后，设定一对新的 localStorage 值。

$("#in").click(function(){
    localStorage.setItem("setText","hello")
})

2、在 b 页面监听 window 的 storage 事件。当这个事件被触发，说明存储数据变化了，通过 event 事件对象的 key 属性判断变化的键值，如果是我们设定的 setText，就可以给 $("#out") 设置内容了。

window.addEventListener("storage",function(e){    if(e.key=="setText"){        var text=localStorage.getItem("setText")
        $("#out").text(text);
    }
});

因为 b 页面监听的是 storage 事件，刷新页面之后，如果 a 页面点击时候设置的 setText 值还是原来的值的话，这个事件就不会被触发。要想让 b 页面刷新后的这个元素仍然显示刚刚设置的值，还应该在 b 页面添加一个判断：

if(localStorage.getItem("text")){    h.innerText=localStorage.getItem("text")}

有什么问题的话，希望可以探讨一下。