как я могу передать объект между двумя отдельными html-файлами с помощью jquery mobile

Я пытаюсь передать объект со страницы page1.html на page2.html с помощью jquery. Существующее решение имеет сотни страниц, поэтому использование div для каждой страницы в одном и том же файле нецелесообразно.

Содержание Page1.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script>
        $(document).on("pagebeforeshow", function (event) {
            alert("pagebeforeshow event fired - pageOne is about to be shown");
        });
        function switchPage() {
            $(":mobile-pagecontainer").pagecontainer("change", "second.html", { role: "page", stuff: "456", reloadPage: true });
        }
    </script>
</head>
<body>

    <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>Header Text</h1>
        </div>

        <div data-role="main" class="ui-content">
            <p>Page One</p>
            <a href="second.html">Go to Page Two</a>
            <input id="Button1" type="button" value="button" onclick="switchPage()" />
        </div>

        <div data-role="footer">
            <h1>Footer Text</h1>
        </div>
    </div>
</body>
</html>

Это содержимое page2.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script>
        $(document).on("pagebeforeshow", function (event) {
            alert("pagebeforeshow event fired - pageTwo is about to be shown");

        });

        $(document).on('pagebeforeshow', 'second.html', function (e, data) {
            alert("pageTwo alert"); // + data.prevPage.find('#test-input').val());
        });



    </script>
</head>
<body>
    <div data-role="page" id="pagetwo">
        <div data-role="header">
            <h1>Header Text</h1>
        </div>

        <div data-role="main" class="ui-content">
            <p>Page Two</p>
            <a href="#pageone">Go to Page One</a>
        </div>

        <div data-role="footer">
            <h1>Footer Text</h1>
        </div>
    </div>

</body>
</html>

Ни одно из предупреждений в page2.html не срабатывает, когда страница изменяется с события нажатия кнопки, а сообщение pageOne отображается при нажатии на «ссылку» на странице 1.

Как я могу заставить page2.html отображать свои собственные предупреждения и захватывать данные, передаваемые со страницы 1, поскольку мне нужно перехватывать объект данных, передаваемый со страницы 1, и реагировать на его содержимое на странице 2.

Ссылки, которые я просмотрел, включают: http://jsfiddle.net/Gajotres/XyqvS/

http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_event_pagebeforeshow2


javascript jquery
person Matt    schedule 17.10.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

  1. Событие pagebeforeshow устарело начиная с jQuery Mobile 1.4 (поэтому вам действительно не следует его использовать).
  2. Если вы должны его использовать - общая идея события заключается в том, чтобы срабатывать перед переходом на новую виртуальную страницу (внутри того же макета DOM), а не перед переключением между двумя реальными разными html-страницами.
  3. Событие получает только 1 параметр (функцию), поэтому вы не можете сделать .on('pagebeforeshow', 'second.html', function

Вы можете использовать файлы cookie/localstorage для обмена данными между двумя страницами в одном домене, но ваш вопрос не так ясен - что именно вы пытаетесь сделать?

person Dekel    schedule 17.10.2016
comment
Привет, Декель, я пытаюсь передать объект между отдельными страницами на мобильных устройствах без отправки обратно на веб-сервер. Например, страница 1 позволит пользователю ввести некоторые данные, и эти данные будут отображаться/использоваться на странице 2. - person Matt; 17.10.2016
comment
Что именно представляет собой этот объект? - person Dekel; 17.10.2016
comment
настраиваемый объект, который будет содержать информацию, собранную на некоторых из предыдущих страниц - person Matt; 17.10.2016
comment
Я до сих пор не понимаю, что это за пользовательский объект... но для этого вы можете использовать localstronge. - person Dekel; 17.10.2016
comment
+1 Спасибо, я посмотрю на localStorage, но мне сказали, что это не всегда уместно в решении - person Matt; 17.10.2016
comment
Я все еще не уверен, чего вы пытаетесь достичь, но localstorage — отличная функция для использования. - person Dekel; 17.10.2016