title: How to Trigger a Function when Returning to an HTML5 Page ? (javascript)
body: <p>I'm going <strong>back and forth between two html pages</strong> - in my example Page1 and Page 2. <strong>When I move back from page 2</strong> to page 1, I <strong>want</strong> to <strong>trigger</strong> a <strong>rebuild-my-html</strong> type <strong>function</strong> - similar to the way that 'onload' is triggered. Onload, of course, is only triggered when the app has been restarted/reloaded. </p>
  
  <p>I'm not sure if I need to do something before I move to page 2 (an event triggered by the user), or if there is a basic function I can keep for Page 1.</p>
  
  <p>I'm sure this is basic, but I just cannot find it! I have been searching the web for DOM events related to onload.</p>
  
  <p>Basic App Structure </p>
  
  <ol>
  <li>Start on Page 1. </li>
  <li><p>The onload function executes  </p>
  
  <pre><code>function initLoad() 
  </code></pre></li>
  </ol>
  
  <p>It is triggered by </p>
  
  <pre><code>      document.addEventListener('readystatechange', function()  
  </code></pre>
  
  <p>(In real app I Use a javascript onload function to layout some html dynamically) </p>
  
  <p>(In real app, user makes a choices to indicate detail they want to see layed out on Page 2) </p>
  
  <ol start="3">
  <li>User Event button click, moves app to Page 2 </li>
  <li><p>On Page 2 an onload function runs  </p>
  
  <pre><code> function init()  
  </code></pre>
  
  <p>(In real app, user also initIates some other events) </p></li>
  <li><p>User event returns app to Page 1 - I'm using </p>
  
  <pre><code> history.go(-1); 
  </code></pre>
  
  <p>because that is the only way I know to do that </p></li>
  <li><p>Upon returning to Page 1, I  WANT APP to Return to Run a rebuild refresh  type function  </p></li>
  <li><p>Throughout the use of the app, I WANT the APP to epeatedly go back and forth from Page 1 to Page 2, triggering a refresh functions on both web pages</p>
  
  <p>(in my real app user is testing themselves on memorization skills. They go back and forth between Page 1 and 2. Page 1 will display information in new ways each time to indicate things that the user has demonstrated knowledge on, in Page 2) </p></li>
  </ol>
  
  <p><strong>Example Code</strong></p>
  
  <p>Page 1 Code STACKexamplePage1Refresh.html</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
  
      &lt;body onunload="OnUnload()"&gt;
  
      &lt;/script&gt;
  
      &lt;script src="STACKExampleRebuild.js"&gt;&lt;/script&gt;
  
       &lt;h1&gt; Page 1 &lt;/h1&gt;
  
      &lt;p id = changeMe&gt;Want html info like this to be changed upon return from Page 2 and execution of rebuildExamplePage1 function&lt;/p&gt;
  
  
      &lt;button onclick="callAnothePage()"&gt;Go to Page 2&lt;/button&gt;
  
  
  
  
      &lt;script&gt;
       &lt;/script&gt;
  
  
      &lt;script&gt;
  
      function initLoad() {
         alert("Page  1 is loaded");
         console.log ("Page 1 is loaded");
  
      }
  
      function OnUnload() { // this does not seem to happen
        alert("Page  1 is UNloaded");
      }
  
  
      document.addEventListener('readystatechange', function() {
          // http://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object
          if (document.readyState === "complete") {
            initLoad();
          }// end if
        }); // end function
  
       window.onload = function() { // this is just another way of testing initLoad - it runs too
             alert("*Page  1 is REloaded*");
         }
  
       function callAnothePage()
       {
          window.location = "STACKexamplePage2Refresh.html"; // 
       }
  
      &lt;/script&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Page 2 Code STACKexamplePage2Refresh.html</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;body onload="init()"&gt;
  
  
        &lt;script src="STACKExampleRebuild.js"&gt;&lt;/script&gt;
  
  
  
  
      &lt;h1&gt; Page 2 &lt;/h1&gt;
  
      &lt;button onclick="historyBack()"&gt;Return To Learn Page&lt;/button&gt;
  
  
       &lt;script&gt;
      function init() {
         alert("init function executed , Page 2 is loaded");
         console.log ("init function executed , Page 2 is loaded");
      }
  
  
  
      function historyBack() {   
               history.go(-1);
               rebuildExamplePage1(); // this function is in STACKExampleRebuild.js
  
  
              //navigator.app.backHistory(); // tried this too .... 1.15.17
              }     
  
  
  
      &lt;/script&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Sample Code: Java Script STACKExampleRebuild.js</p>
  
  <pre><code>     function rebuildExamplePage1(){
          alert("rebuildExamplePage1 function execute .... function  that will allow for Page  1 rebuild executed");
          console.log ("rebuildExamplePage1 function execute .... function  that will allow for Page  1 rebuild executed");
  
         /*
          var changePage1Info = "This info changed while on page 2";
          document.getElementById("changeMe").innerHTML = changePage1Info;
        */
  
  
           }
  </code></pre>
  
  <p>When I run the rebuildExamplePage1 function, and try to run the commented out part - changing the html id 'changeMe' - which is back on Page 1 - </p>
  
  <p>I get the typical error that "null is not an object " in reference to the changeMe object</p>
  
  <p>I think that is because the javascript function can't access the html on page 1, while it's on page 2 . Though I was hoping that putting the commands after the history command might work.</p>
  
  <p>What I really want is some kind of function that is triggered whenever a user returns to an html page - a refresh/reentry type function </p>
  
  <p>I bet there is some special kind of function, that I have not been able to find, that will <strong>execute upon a return to html</strong> - like onload does when I first load the page. </p>
  
  <p>A few things I've tried that don't work </p>
  
  <p>The function onUnload for page 1, definitely does not execute at any time - I don't think this makes sense for this example anyway</p>
  
  <p>I found various examples that use persistant data, to pass things to other pages, but they always seem to be pages that have not yet been loaded. I already use persistent data in my onload type functions - but they only happen the first time the page is loaded, not upon return</p>
  
  <p>I need to be able to go back and forth from Page 1 to Page 2 </p>
  
  <p>I will have the same problem the second time I return to Page 2. In my real app I bring up different detail info on Page 2 each time</p>