Выполнение функции по мере необходимости в JQuery Mobile на нескольких страницах
Мне трудно обдумать эту проблему, и я надеюсь, что некоторые из вас могут пролить свет на это для меня.
Я видел множество вопросов, которые задают, какой центр вокруг выполнения сценария до (pagebeforeshow) или после загрузки страницы (pagechange), и эти команды предназначены для автоматического выполнения функции или сценария. Что я хочу сделать, это позволить пользователю вызывать определенную функцию по мере необходимости, в течение использования страницы. Пример лучше проиллюстрирует то, о чем я говорю.
В этом простом примере у меня есть две html-страницы, page1.html и page2.html соответственно. Код для page1.html выглядит следующим образом.
page1.html
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page 1 content goes here.</p>
<p></p>
<a href="page2.html" data-role="button" data-transition="slide">Next Page</a>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
<script type="text/javascript">
$(document).on('pagebeforeshow', '#page1', function() {
alert('this is page 1');
});
</script>
</div><!-- /page -->
</body>
</html>
Чтобы проверить загрузку скрипта page1, я добавил функцию, которая отображает предупреждение перед созданием страницы. Работает как положено.
page2.html
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="page2">
<div data-role="header" data-theme="b">
<h1>Page 2</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page 2 content goes here.</p>
<p></p>
<a href="page1.html" data-role="button" data-transition="slide" data-direction="reverse">Prev Page</a>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h4>Page Footer</h4>
</div><!-- /footer -->
<script type=text/javascript">
$(document).delegate("#page2", "pageinit", function() {
//load any custom page specific scripts here
$.getScript( "js/alert2.js", function() {});
});
</script>
</div><!-- /page -->
</body>
</html>
На странице 2 я загружаю скрипт (alert2.js) после загрузки страницы. Эта команда
$.getScript( "js/alert2.js", function() {});
Getscript, загружает файл alert2.js, который выглядит следующим образом:
alert2.js
alertPageTwo();
function alertPageTwo() {
alert("this is page two");
}
Команда Getscript загрузит определенный файл JavaScript и сразу запустит его содержимое. (Потому что я добавил вызов функции в файл alert2.js). Это, конечно, работает как надо, но на самом деле это не то, что мне нужно.
Что я действительно пытаюсь сделать, так это создать файл js с рядом функций, которые я могу вызывать по мере необходимости в течение страницы.
Так что файл alert2.js в идеале должен выглядеть так:
alert2.js (обратите внимание на удаление вызова функции)
function alertPageTwo() {
alert("this is page two");
}
и тогда я мог бы вызвать функцию из блока скрипта page2.html, например, при нажатии на ссылку:
page2.html
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="page2">
<div data-role="header" data-theme="b">
<h1>Page 2</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page 2 content goes here.</p>
<p></p>
<a href="page1.html" data-role="button" data-transition="slide" data-direction="reverse">Prev Page</a>
<a id="link" href="#">Link</a>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h4>Page Footer</h4>
</div><!-- /footer -->
<script type=text/javascript">
$.getScript( "js/alert2.js", function() {});
$('#link').click(function () {
alertPageTwo();
});
</script>
</div><!-- /page -->
</body>
</html>
Обратите внимание, что я добавил ссылку и изменил блок скрипта внизу, чтобы функция вызывалась при нажатии на ссылку. К сожалению, это не работает.
Если бы это была просто стандартная веб-страница, я мог бы загрузить файл alert2.js в разделе head и затем вызывать его, когда захочу. Однако, поскольку эти страницы предназначены для мобильных устройств, я попытался проследить за документами для мобильных устройств и разделить содержимое на две страницы (с первой страницы, загружающей все глобальные файлы CSS и JS в заголовке, и страницы 2, загружающей определенный файл JS).) и я полностью застрял в выяснении, как вызывать функцию со страницы по мере необходимости, а не во время создания страницы.
Здесь должна быть какая-то базовая вещь, по которой я скучаю, поэтому я был бы признателен за любые предложения, которые вы все можете иметь.
Спасибо!