Alernating content of one web site from another

I have java/Flask (any other technology I don't know exists yet :)) question.

Suppose I have two sites: index1.html and 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>

It can be done partially with Flask but every time i trigger from index1.html index2.html I have to refresh manually index2.html.

Maybe there is another technology which help me to do that

1 answer

  • answered 2018-01-13 17:19 guest271314

    You can use localStorage storage event or SharedWorker to communicate between browsing contexts.

    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