Question

我正在尝试使用jquery将page1.html中的页面中的对象传递给page2.html。现有的解决方案有100个页面，因此在同一个文件中为每个页面设置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中的任何警报都不会触发，而点击第1页上的“链接”时会显示pageOne消息。

如何让page2.html显示自己的警报并获取从page1传递的数据，因为我需要捕获从page1传递的数据对象并对第2页中的内容作出反应。

我看过的链接包括： http://jsfiddle.net/Gajotres/XyqvS/

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

Answer 1

jQuery Mobile 1.4的pagebeforeshow event is deprecated（因此你真的不应该使用它）。
如果你必须使用它 - 事件的一般想法是在转换到新的虚拟页面之前触发（在相同的DOM布局内），而不是在两个真正不同的html之间切换之前页。
该事件只获得1个参数（一个函数），因此您无法执行.on('pagebeforeshow', 'second.html', function

您可以使用cookies / localstorage在同一个域中的两个页面之间共享数据，但您的问题不是很明确 - 您究竟想要做什么？

如何使用jquery mobile在两个单独的html文件之间传递对象

1 个答案: