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

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

javascript jquery

Javascript 如何使用jquery mobile在两个单独的html文件之间传递对象,javascript,jquery,Javascript,Jquery,我正在尝试使用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="

我正在尝试使用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>


$（文档）。在（“pagebeforeshow”上，函数（事件）{
警报（“pagebeforeshow事件已触发-即将显示pageOne”）；
});
函数切换页（）{
$（“：mobile pagecontainer”）.pagecontainer（“change”，“second.html”，{role:“page”，stuff:“456”，reloadPage:true}）；
}
标题文本
第一页
页脚文本

这是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>


$（文档）。在（“pagebeforeshow”上，函数（事件）{
警报（“已触发pagebeforeshow事件-即将显示第二页”）；
});
$（document）.on（'pagebeforeshow'，'second.html'，function（e，data）{
警报（“第二页警报”）；//+data.prevPage.find（“#测试输入”）.val（）；
});
标题文本
第二页
页脚文本

当页面从button click事件更改时，page2.html中的两个警报都不会触发，当单击第1页上的“a链接”时，会显示pageOne消息

如何使page2.html显示自己的警报并获取从page1传递的数据，因为我需要捕获从page1传递的数据对象并对其在page2中的内容做出反应

我看到的链接包括：

从jquerymobile1.4开始（因此您真的不应该使用它）

如果您必须使用它-事件的总体思路是在转换到新的虚拟页面（在同一DOM布局中）之前触发，而不是在两个真正不同的html页面之间切换之前触发

事件仅获取1个参数（一个函数），因此您无法在（'pagebeforeshow'，'second.html'，function

您可以使用Cookie/localstorage在同一域的两个页面之间共享数据，但您的问题不太清楚-您到底想做什么

从jquerymobile1.4开始（因此您真的不应该使用它）

如果您必须使用它-事件的总体思路是在转换到新的虚拟页面（在同一DOM布局中）之前触发，而不是在两个真正不同的html页面之间切换之前触发

事件仅获取1个参数（一个函数），因此您无法在（'pagebeforeshow'，'second.html'，function

您可以使用Cookie/localstorage在同一域的两个页面之间共享数据，但您的问题不太清楚-您到底想做什么？

Hi Dekel，我正在尝试在移动设备上的不同页面之间传递对象，而无需发回Web服务器。例如，第1页允许用户输入一些详细信息和se详细信息将在第2页上显示/使用此对象到底是什么？一个自定义对象将包含在前几页上收集的信息我仍然不了解此自定义对象到底是什么…但您可以使用localstronge。+1谢谢，我将查看localStorage，但有人告诉我它并不总是合适的在soluctionHi Dekel中，我试图在移动设备上的不同页面之间传递一个对象，而无需发回Web服务器。例如，第1页允许用户输入一些详细信息，这些详细信息将在第2页上显示/使用。这个对象到底是什么？一个自定义对象，包含在某些页面上收集的信息e上一页我仍然不明白这个自定义对象到底是什么…但是你可以使用localstronge。+1谢谢，我会查看localStorage，但有人告诉我它在解决方案中并不总是合适的