使用 Javascript 的下一页/上一页？

Question

我正在创建一个类似于一系列页面的在线培训“PowerPoint”。这将非常简单，并且页面设置如下：

page1.php page2.php page3.php ... page20.php

我将继续上学并使用 iframe 隐藏地址栏，因为人们不应该能够理解命名约定并跳过。 （它不是太严重，所以我想保持简单）。

我想做的是基于他们所在的当前页面，例如 page5.php 创建指向 page4.php 和 page6.html 的链接。显然无需手动对每个页面进行编码。

如果这是一个 javascript 函数，那将是理想的，因为我不希望地址显示在浏览器信息栏中，但我也对 php 技巧持开放态度。

任何想法如何做到这一点？

Answer 1

使用window.location。你可以把它放在这样的函数中：

<script type='javascript'>
function goto(url) { window.location=url; }
</script>
<a href='#' onclick='goto("page3.php"); return false;'>Previous</a>
<a href='#' onclick='goto("page5.php"); return false;'>Next</a>

---

你也可以使用会话变量来隐藏它，这样你就可以做这样的事情（我希望我的 PHP 技能仍然很好）：

<?php
// At Beginning of first script
start_session();
$MAX_PAGE = 20; // Set this to the highest page number
if(!isset($_SESSION['curpage'])) {
  $_SESSION['curpage'] = 1;
} else {
  // __EDIT: Added page max and mins.
  if($_GET['go'] == 'prev' && $_SESSION['curpage'] > 1) {
    $_SESSION['curpage']--;
  } else if($_GET['go'] == 'next' && $_SESSION['curpage'] < $MAX_PAGE) {
    $_SESSION['curpage']++;
  }
}
?>

然后把它放在你需要的页面中。

<?php
include("page$_SESSION[curpage].php");
if($_SESSION['curpage'] > 1) {
  echo "<a href='page.php?go=prev' rel='prev'>Previous</a>";
}
if($_SESSION['curpage'] < $MAX_PAGE) {
  echo "<a href='page.php?go=next' rel='next'>Next</a>";
}
?>

请注意，当每次返回不同的页面时，Web Crawlers 将无能为力。

Answer 2

对 Pikrass 功能的一点扩展，以处理第一个/最后一个场景：

function goto(url) { window.location=url; }

var curPage = parseInt(location.href.replace(/page([0-9]+)\.php/, ''))
if (curPage <= 1) {
  // First page, no 'back' link
  document.write('<a href="#" class="disabled">Back</a>');
} else {
  var backPage = curPage-1;
  document.write("<a href=\"#\" onclick=\"goto('page"+backPage+".php')\">Back</a>");
}
if (curPage >= 9) { // Replace with highest page number
  // Last page, no 'next' link
  document.write('<a href="#" class="disabled">Next</a>');
} else {
  var nextPage = curPage+1;
  document.write("<a href=\"#\" onclick=\"goto('page"+nextPage+".php')\">Back</a>");
}

如果您查看页面的源代码，URL 不会被隐藏，但是当您将鼠标悬停在链接上时，它们不会按要求显示在浏览器的状态栏中。

编辑 用 Pikrass 更具体的规则更新 RegEx，以处理 URL 中其他地方的其他数字。谢谢皮克拉斯！

Answer 3

var actuPage = parseInt(location.href.replace(/[^0-9]/, ''))+1;
location.href = 'page'+actuPage+'.php';

如果您的网址中没有其他数字，这应该可以工作。如果这样做，则必须更改 replace 的模式。 代码用于下一页，将上一页的+1更改为-1。

Answer 4

这是 MidnightLightning 的版本，它具有更好的正则表达式来获取当前页面，即使您的 URL 中有其他数字也可以使用。

function goto(url) { window.location=url; }

var regPage = /page([0-9]+)\.php/;
var match = regPage.exec(location.href);
var curPage = parseInt(match[1]);

if (curPage <= 1) {
  // First page, no 'back' link
  document.write('<a href="#" class="disabled">Back</a>');
} else {
  var backPage = curPage-1;
  document.write("<a href=\"#\" onclick=\"goto('page"+backPage+".php')\">Back</a>");
}
if (curPage >= 9) { // Replace with highest page number
  // Last page, no 'next' link
  document.write('<a href="#" class="disabled">Next</a>');
} else {
  var nextPage = curPage+1;
  document.write("<a href=\"#\" onclick=\"goto('page"+nextPage+".php')\">Back</a>");
}

我喜欢由几个人建立一个答案。 :)

如果可以，请按照建议选择 PHP 代码。它更“干净”。

Answer 5

听起来你想使用查询字符串变量，所以page.php?page=1、page.php?page=2、page.php?page=3等等

Answer 6

为什么不使用 ajax 而不是 iframe？

好吧，没关系，你标记了问题 jquery，所以我认为你可以找到有用的使用另一个链接属性来“告诉”js 重定向到哪里。

我的意思是：

$.(document).ready(funciton(){
    //i use the live method becose.. you know, maybe in the future
    //you will go with ajax ;)
     //live method is avbaiable in jquery 1.3!
    $("a.navigation").live('click', function(){
        window.location = $(this).attr("rel");
    });
});

这让您的 html 标记摆脱了 <a> 标记中的许多 onclick 函数。

因此，您的标记将如下所示：

<a href="#" rel="page1.php">Go to page 1</a>
<a href="#" rel="page2.php">Go to page 2</a>
<!-- .. and so on.. -->

或者，如果你仍然想隐藏真实的网址，你可以这样做：

<a href="#" rel="1">Go to page 1</a>
<a href="#" rel="2">Go to page 2</a>
<!-- .. and so on.. -->

用这个js（可能没有嵌入到页面源中？）

$.(document).ready(funciton(){
    $("a.navigation").live('click', function(){
        window.location = 'page' + $(this).attr("rel") + '.php';
    });
});

但是，如果您打算使用 js 链接，您将永远无法完全隐藏页面 url。

您可以使用 php 和哈希字符串孪生来隐藏它们，但我不知道它是否值得玩。

其他人提出了一种计算页数和页链接的正则表达式方法；我将通过 PHP 打印链接：会让你更好地控制全局行为（我们不知道你有多少页，如果它们的数字与数据库相关，即使你给我们的信息也会让我觉得你有您服务器上的所有页面[x].php）