Question

我有java / Flask（我还不知道存在的任何其他技术:)）问题。

假设我有两个站点：index1.html和index2.html

index1.html：

<!DOCTYPE html>
<html>
  <body>
    <p>This example "trigger" action on another site "onclick".</p>
    <p id="demo" onclick="myFunction()">Click me.</p>

    <script>
        function myFunction() {
            //send info/request/get to localhost/index2.html for example get using XMLHttpRequest;
        }
    </script>

</body>
</html>

index2.html

<!DOCTYPE html>
    <html>
       <script>
           window.onload= function (){ //Wait for some request from index1.html than do something for example change string in demo}
       </script>
    <body>

    <p id="demo">To change</p>

</body>
</html>

可以部分使用Flask完成，但每次我从index1.html index2.html触发时，我必须手动刷新index2.html。

也许还有其他技术可以帮助我做到这一点

Answer 1

您可以使用localStorage storage个事件或SharedWorker在浏览环境之间进行通信。

index1.html

<!DOCTYPE html>
<html>
  <body>
    <a href="page2.html" target="_blank">page2</a>
    <p>This example "trigger" action on another site "onclick".</p>
    <p id="demo" onclick="myFunction()">Click me.</p>
    <script>
        localStorage.clear(); // clear `localStorage`
        function myFunction() {
           localStorage.setItem("page1", "value");
        }
    </script>

</body>
</html>

index2.html

<!DOCTYPE html>
<html>
<script>
  window.onload = function() { 
    if (localStorage.getItem("page1") != null) {
      document.getElementById("demo").textContent = localStorage.getItem("page1");
    } 
    // do stuff at `storage` event
    onstorage = e => {
      if (e.key === "page1") {
        document.getElementById("demo").textContent = e.newValue;
      }
    }
  }
</script>
<body>
  <p id="demo">To change</p>
</body>
</html>

plnkr http://plnkr.co/edit/4Xz58S5MDidORm4CAPco?p=preview

一个网站的内容与另一个网站的内容相同

1 个答案: