javascript - 如何让 javascript/html5 按钮返回上一页? (浏览器/PhoneGap)

标签 javascript android html cordova

第二次编辑版本

***** 适用于 PhoneGap(以及 Safari)********

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

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

phonegap page 2

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

最佳答案

我不确定我是否理解了一切。但我认为这就是你的问题: this (navigator.notification.alert();) 是一个函数,您可以通过它使用对话框。它是cordova的一个插件,如果你想使用它,你必须安装它。以下代码展示了如何覆盖后退按钮事件(设备的后退按钮),以及如何返回上一页:

  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() ),该函数将在用户单击后运行“完成” - 按钮。我希望这有助于您理解。

关于javascript - 如何让 javascript/html5 按钮返回上一页? (浏览器/PhoneGap),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38086660/

相关文章:

javascript - HighCharts 中的单个系列中是否可以有不同颜色的图表?

javascript - 如果选择相同的文件路径,Svelte 文件输入不会触发 react 性

android - 同步 ListFragment 和 SupportMapFragment 选择

javascript - 如何获取模型表单按钮的点击事件?

javascript - 如何从html表单中获取多个复选框的值

javascript - 如何获取具有数组名称的输入标签的检查值并将此值发送到服务器

android - 我们如何在 Activity 中使用颜色查看背景图像?

java - Android IllegalArgumentException 被调用

html - 在显示表行时更改隐藏表行中表数据的样式

javascript - 将 PDF 上传到 OneDrive Microsoft Graph Rest API