Question

我在两个html页面之间来回 - 在我的示例第1页和第2页中。当我从第2页移回到第1页时，我希望触发 rebuild-my-html 类型功能 - 类似于＆＃39;的onload＆＃39;被触发了。当然，只有在重新启动/重新加载应用程序时才会触发Onload。

我不确定在转到第2页（用户触发的事件）之前是否需要做某事，或者我可以为第1页保留基本功能。

我确定这是基本的，但我找不到它！我一直在网上搜索与onload相关的DOM事件。

基本应用程序结构

从第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）

示例代码

Page 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>

第2页代码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＆＃39; changeMe＆＃39; - 返回第1页 -

我得到的典型错误是＆＃34; null不是一个对象＆＃34;参考changeMe对象

我认为这是因为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非常简单。任何一个都适用于这种情况，但基本上流程将是这样的：

点击时的链接将存储（在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 个答案:

如何在返回HTML5页面时触发函数？ （JavaScript的）

3 个答案:

如何在返回HTML5页面时触发函数？（JavaScript的）