在两个 html 文件之间更改 jQuery Mobile 的页面

Change Page for jQuery Mobile between two html files

本文关键字：jQuery Mobile 之间 文件 html 两个      更新时间：2023-09-26

我正在尝试制作一个包含两个页面的简单网站，"搜索"和"结果"。

起初，我有一个多页模板运行良好。 我会更改页面，在页面更改时，我会使用 ajax 来获取结果。 问题是我希望能够在不先返回搜索页面的情况下加载结果页面。

我想通过查询字符串将参数传递给结果页面，以便我可以有这样的东西：

search.html + "某些搜索词" -> results.html?q=some+search+terms

问题是，当我将 html 拆分为两个文件时，我似乎无法正常工作。

我尝试打电话 

$.mobile.changePage("results.html?q=" + escape(search))

，但$(document).ready函数未触发。 我有点明白为什么它没有，因为changePage将第二页加载到 DOM 中？

我还尝试手动重定向，在这种情况下，$(document).ready 函数确实会在结果.html上触发，但使用后退按钮或返回搜索页面不会触发该$(document).ready。

我尝试连接pagechange函数以搜索.html，假设这会在我加载第二页时触发，但没有任何反应。

有没有人对我将如何做到这一点有建议？ 还是让结果页更独立于搜索页的最佳方法？

我也

被这个咬了一口，通过查询字符串传递参数真的不是一个好主意，它使jQueryMobile以一种奇怪的方式运行。

相反，我一直在使用会话存储，它运行良好。你也可以使用饼干。

我不是100%确定您实际遇到问题的地方，但这里有一些重要的jQuery Mobile特定信息可以帮助您。

首先，阅读本页顶部的黄色大部分：http://jquerymobile.com/demos/1.1.0/docs/api/events.html

当页面从外部文档引入 DOM 时，document.ready不会触发。相反，您需要使用事件委派和上面链接中指定的页面事件。您很可能想使用 pageinit 作为document.ready的替代品。

然后阅读本页的顶部：http://jquerymobile.com/demos/1.1.0/docs/api/methods.html（关于$.mobile.changePage()的部分）。

关于第二个链接的重要部分是，您可以通过$.mobile.changePage()函数传递数据，如下所示：

$.mobile.changePage('results.html', { data : { q : search } });

您甚至可以将type选项设置为 post这样就不会发送查询字符串（这应该确保您不会一次在 DOM 中获得多个相同的页面）。

$.mobile.changePage('results.html', { data : { q : search }, type : 'post' });

另一个解决方法是手动将 data-url 属性添加到<div data-role="page" id="results">页面。当你抓取这样的页面时：

 $.mobile.changePage("results.html?q=search+term+here");

它data-url设置为：results.html?q=search+term+here .如果手动将data-url设置为 results.html，则可以导航到如下所示的页面：

 $.mobile.changePage("results.html", { data : { q : 'search+term+here' } });

这将首先查找data-url属性设置为 results.html 的 data-role="page" 元素，然后再通过 AJAX 重新加载伪页面。

感谢您的输入。我使用了一个插件，它允许我在哈希中使用假查询参数进行多页布局。

https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params

我刚刚添加了它并在页面更改时运行搜索，获取搜索的页面参数。

相关文章：