如何让 javascript/html5 按钮返回上一页？（浏览器/PhoneGap）答案

【问题标题】：How to get a javascript/html5 button to return to previous page? (Browser/PhoneGap)如何让 javascript/html5 按钮返回上一页？（浏览器/PhoneGap）
【发布时间】：2016-06-28 21:32:04
【问题描述】：

第二版编辑

***** 适用于 PhoneGap（以及 Safari）*******

从一页开始 (index.html)
用户单击一个按钮，该按钮使用硬编码的本地 URL 将她发送到另一个页面“secondLinkPageVerK.html”
在该页面上，用户可以单击另一个按钮返回到上一页 ..... 使用两个按钮进行选择
一个按钮是 index.html 的硬编码部分 url
另一个按钮选择是一种更优雅的方式，使用历史记录

**** 使用以下 Matthais 回复中的想法 **** 我仍然没有“navigator.notification.alert”技术（在中找到） How to navigate one page to another page in android phonegap? 工作，因为我认为这是一个 PhoneGap 功能，我还不明白如何下载或链接到那些图书馆（以某种方式搜索错误）

****** index.html 是通过按钮链接到 secondLinkPageVerK.html 的页面，该页面通过按钮链接回此页面 *******

<!DOCTYPE HTML>
<html>
<head>


<title>FIRST PhoneGap Page 1</title>

      <script type="text/javascript" charset="utf-8">




      </script>      
      <script type="text/javascript" charset="utf-8">

         function onLoad()
         {
              document.addEventListener("deviceready", onDeviceReady, true);
         }

         function onDeviceReady()
         {
              // navigator.notification.alert("PhoneGap is working");
         }

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

      </script>

   </head>

   <body onload="onLoad();">
    <h1>Welcome to Page 1</h1>
    <h2> Version K </h2>

    <button name="buttonClick" onclick="callAnothePage()">Click Me To Move to Second Page</button>

******secondLinkPageVerK.html - 链接到 ******** 的第二个页面

<!DOCTYPE HTML>
<html>
<head>


<title>SECOND PhoneGap Page 2</title>

       <script>   


         function onLoad()
         {
              document.addEventListener("deviceready", onDeviceReady, true);
              // document.addEventListener("backbutton", BackKeyDown, true);
         }

        // using it this way causes confusion, so moving to onLoad
         function onDeviceReady()
         {
              // navigator.notification.alert("PhoneGap is working");

         }

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


         // for the back button
         /*
           document.addEventListener("deviceready", onDeviceReady, true);
         */

         function onDeviceReady()
         {     
               document.addEventListener("backbutton", BackKeyDown, true);
         }

         function BackKeyDown()
         {
             navigator.notification.alert();
             //navigator.app.exitApp();  // For Exit Application
         }



         function historyBack(){   
              history.go(-1);
              navigator.app.backHistory();
              }     



      </script>

  </head>

  <body onload="onLoad();">
     <h1>Welcome to Page 2</h1>
       <h2> Version K </h2>
    <h2>Link Back and Forth</h2>
    <button name="buttonClick" onclick="callAnothePage()">RETURN to Page 1 - hardcoding local URL</button>
      <center> .* .* . </center>
    <center> . . . </center>
      <center> .* .* . </center>
    <button onclick="historyBack()">Return - history.go technique - cleaner technique</button>

  </body>

  </html>

【问题讨论】：

看起来我还需要最后关闭

标签： javascript android html cordova

【解决方案1】：

我不确定我是否理解所有内容。但我认为那是你的问题： this (navigator.notification.alert();) 是一个函数，您可以通过它使用对话框。它是cordova的插件，如果你想使用它，你必须安装它。以下代码显示了如何覆盖 backbutton-event（设备的后退按钮）以及 not 如何返回上一页：

  document.addEventListener("deviceready", onDeviceReady, true);   

         function onDeviceReady()               
     {                    
           document.addEventListener("backbutton", BackKeyDown, true);               
     }               

     function BackKeyDown()               
     {               
         console.log ("user return");               
         //debugger;               
         navigator.notification.alert();               
         //navigator.app.exitApp();  // For Exit Application               
     }

我认为您的问题的解决方案可能是以下按钮：

<button onclick="goback()">go back</button>

具有以下功能：

    <script>
    function goback(){   
    history.go(-1);
    navigator.app.backHistory();}     </script>

here the reference

编辑： 为了解释navigator.notification.alert 函数，我向您展示了cordova plugin Page 的示例。

首先（如果你想使用对话框）你需要用你的cli安装插件：

cordova plugin add cordova-plugin-dialogs

然后这个插件安装在你选择的cordova文件夹中。之后您可以像这样使用此功能，例如：

function alertDismissed() {
    // do something
}

navigator.notification.alert(
    'You are the winner!',  // message
    alertDismissed,         // callback
    'Game Over',            // title
    'Done'                  // buttonName
);

您正在创建类似于alert(); 函数的东西，但是您可以定义一个函数（alertDismissed()），该函数将在用户单击'Done' - 按钮后运行。我希望这能帮助你理解。

【讨论】：

这似乎是个好主意，马蒂亚斯。这对我来说也很有意义。
我输入了以下代码。我的 console.log 闪烁，但它仍然停留在同一页面上。
Page 2: Hey Ho - Linked and Go

来到另一个网页
显然我不知道如何将代码放入我的 cmets
你在你的应用程序中运行过这个吗？此功能在您 PC 上的浏览器中不起作用。实际上，如果您通过电话间隙运行您的应用程序，我不确定这是否有效。我认为您可以尝试构建应用程序并在手机上安装后尝试。时间不早了，我明天睡觉再回复。如果您解决了问题，请通知我们。

Page 2: Hey Ho - Linked and Go