Следующая / Предыдущая страница с 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>";
}
?>

Обратите внимание, что веб-сканеры не смогут с этим многое сделать, когда он каждый раз возвращает новую страницу.

Answer 2

Почему вы не используете 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-разметку от многих onclick функций в тегах <a>.

Итак, ваша разметка будет выглядеть примерно так:

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

Или, если вы все еще хотите скрыть настоящие URL, вы можете сделать:

<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';
    });
});

Но вы никогда не сможете полностью скрыть URL-адреса страниц, если планируете использовать ссылки js.

Вы можете скрыть их, используя php и двойник хэшированных строк, но я не знаю, стоит ли это игры.

Другой предложил регулярное выражение для расчета количества страниц и ссылок на страницы; Я пойду печатать ссылки через PHP: это позволит вам намного лучше контролировать глобальное поведение (мы не знаем, сколько у вас страниц, и если их числа связаны с базой данных, даже информация, которую вы нам предоставили, заставит меня думать, что у вас есть вся страница [x] .php на вашем сервере)

Answer 3

Звучит так, будто вы хотите использовать строковые переменные запроса, поэтому page.php?page=1, page.php?page=2, page.php?page=3 и т. Д.

Answer 4

Вот версия MidnightLightning с лучшим RegExp для получения текущей страницы, которая работает, даже если у вас есть другие номера в ваших 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

Небольшое расширение функции Пикрасса, чтобы иметь дело с первым / последним сценарием:

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-адреса не скрываются, если вы просматриваете источник страницы, но они не отображаются в строке состояния браузера при наведении курсора на ссылку.

Редактировать Обновление RegEx с более конкретным Pikrass, чтобы иметь дело с другими цифрами в другом месте в URL Спасибо Пикрасс!

Answer 6

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

Это должно работать, если у вас нет другого номера в ваших URL. Если вы это сделаете, вам придется изменить шаблон для replace. Код для следующей страницы, измените +1 на -1 для предыдущей.