如何在返回HTML5頁面時觸發函數？（JavaScript的）

Question

我在兩個html頁面之間來回走動 - 在我的示例Page1和Page 2. 當我從第2頁回到第1頁時，我想觸發一個rebuild-my-html類型函數 - 類似於' onload'被觸發。 當然，只有在重新啟動/重新加載應用程序時才會觸發Onload。

我不確定在轉到第2頁（由用戶觸發的事件）之前是否需要做某事，或者我是否可以保留第1頁的基本功能。

我確定這是基本的，但我找不到它！ 我一直在網上搜索與onload相關的DOM事件。

基本的App結構

從第1頁開始。
onload函數執行
```
 function initLoad() 
```

它由觸發

      document.addEventListener('readystatechange', function()

（在真實應用程序中我使用javascript onload函數動態布局一些html）

（在真實應用中，用戶做出選擇以指示他們希望在第2頁上看到的細節）

用戶事件按鈕單擊，將應用程序移動到第2頁
在第2頁上運行onload函數
```
  function init() 
```
（在真實應用中，用戶還會啟動其他一些事件）
用戶事件將應用程序返回到第1頁 - 我正在使用
```
  history.go(-1); 
```
因為這是我知道的唯一方法
返回第1頁后，我想要APP返回運行重建刷新類型功能
在整個應用程序的使用過程中，我希望APP能夠在第1頁到第2頁之間來回切換，在兩個網頁上觸發刷新功能
（在我的真實應用程序用戶正在測試自己的記憶技能。他們在第1頁和第2頁之間來回切換。每次都會以新的方式顯示信息，以指示用戶已經證明的知識，在第2頁）

示例代碼

第1頁代碼STACKexamplePage1Refresh.html

    <!DOCTYPE html>
    <html>

    <body onunload="OnUnload()">

    </script>

    <script src="STACKExampleRebuild.js"></script>

     <h1> Page 1 </h1>

    <p id = changeMe>Want html info like this to be changed upon return from Page 2 and execution of rebuildExamplePage1 function</p>


    <button onclick="callAnothePage()">Go to Page 2</button>




    <script>
     </script>


    <script>

    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"; // 
     }

    </script>

    </body>
    </html>

代碼STACKexamplePage2Refresh.html

    <!DOCTYPE html>
    <html>
    <body onload="init()">


      <script src="STACKExampleRebuild.js"></script>




    <h1> Page 2 </h1>

    <button onclick="historyBack()">Return To Learn Page</button>


     <script>
    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
            }     



    </script>

    </body>
    </html>

示例代碼：Java Script STACKExampleRebuild.js

     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;
      */


         }

當我運行rebuildExamplePage1函數，並嘗試運行注釋掉的部分 - 更改html id'changeMe' - 這是第1頁的 -

我在引用changeMe對象時得到“null不是對象”的典型錯誤

我認為這是因為javascript函數無法訪問第1頁上的html，而它位於第2頁。 雖然我希望在歷史命令之后放置命令可能會起作用。

我真正想要的是當用戶返回到html頁面時觸發的某種功能 - 刷新/重新輸入類型功能

我打賭有一些特殊的功能，我無法找到，它會在返回到html時執行 - 就像我第一次加載頁面時的onload一樣。

我試過的一些東西不起作用

第1頁的onUnload函數肯定不會在任何時候執行 - 我認為無論如何這對於這個例子都沒有意義

我發現了各種使用持久數據的示例，將內容傳遞給其他頁面，但它們似乎總是尚未加載的頁面。 我已經在onload類型函數中使用持久數據 - 但它們只在第一次加載頁面時發生，而不是在返回時發生

我需要能夠從第1頁到第2頁來回走動

第二次回到第2頁時，我會遇到同樣的問題。在我的真實應用程序中，每次都會在第2頁上顯示不同的詳細信息

Answer 1

將ID添加到每個html頁面的body標簽，然后進行條件設置以查看主體是否在“load”上有第2頁ID（我知道它是readystatechange，但我不能在jsfiddle中重新創建）。

 var page2 = document.getElementById('page-2'); if (page2 !== null) { alert('page 2 has been loaded'); } else { alert('page 2 has not been loaded') }

 <body id="page-2"> </body>

Answer 2

好的，所以在您對原始問題的評論中作出解釋后，我認為最適合您的解決方案是使用cookies或localstorage非常簡單。 任何一個都適用於這種情況，但基本上流程將是這樣的：

點擊后的第1頁鏈接將存儲（在cookie或localstorage中，如果用戶瀏覽器使用允許我這樣做，我可能會使用localstorage）用戶點擊了什么問題。

第2頁將讀取商店並向用戶顯示適當的數據。

當用戶在第2頁上單擊或輸入答案時，您可以計算它是否正確，將結果保存到商店，然后將用戶發送回第1頁。

第1頁，在加載時，需要讀取商店以確定哪些項目已被回答以及它們是否正確或不正確。

這是很多要編寫的代碼所以我不打算把它全部寫出來，但這應該足以讓你開始了。

Answer 3

我有我的示例應用程序工作。 當從第2頁返回時，頁面1現在返回到它的onload功能。一個持久存儲項也被識別，所以當我在第2頁上工作后返回第1頁時，我將能夠有一組單獨的邏輯用於更改html。。我突然注意到了什么（為什么我以前沒有注意到？）是因為需要重新加載 - 執行它的onload函數 - 是因為Page 1使用直接url引用轉到第2頁 - 它將執行onload函數。

 function callAnothePage()
    {
    window.location = "STACKexamplePage2Refresh.html";  
     }

而第2頁使用的是“歷史記錄” - 這意味着onload功能沒有被觸發

  function historyBack() {   
          history.go(-1);

         }

因此使用了兩種完全不同的技術。 現在看來顯而易見，但我的注意力總是在別處引起。 我當然進行了測試，以確保持續數據在來回傳播時會保持不變，而且看起來如此。 我之前發送過第1頁到第2頁的持久數據，所以我認為它會 - 但是在你測試之前你永遠都不會知道。

使用歷史肯定是有用的 - 我肯定有可能想要這樣做。

如何在返回HTML5頁面時觸發函數？（JavaScript的）

問題描述

3 個解決方案

解決方案1
0 2017-01-26 18:35:24

解決方案2
0 2017-01-27 15:33:24

解決方案3
0 已采納 2017-02-04 04:33:10

如何在返回HTML5頁面時觸發函數？ （JavaScript的）

問題描述

3 個解決方案

解決方案1 0 2017-01-26 18:35:24

解決方案2 0 2017-01-27 15:33:24

解決方案3 0 已采納 2017-02-04 04:33:10

如何在返回HTML5頁面時觸發函數？（JavaScript的）

解決方案1
0 2017-01-26 18:35:24

解決方案2
0 2017-01-27 15:33:24

解決方案3
0 已采納 2017-02-04 04:33:10