javascript jQuery 移动：在哈希 URL 中提供参数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5791943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery mobile: supply parameters in hash URL?
提问by simon
I'm working in jQuery mobile, which is great. I have a question about supplying parameters inside the hash part of a URL.
我在 jQuery mobile 工作，这很棒。我有一个关于在 URL 的哈希部分内提供参数的问题。
Here's some example code. In the contentpart of the home page, I'd like to be able to link to a page called e.g. '#photo-123' and have it load the 'photo' page below. I'd then extract the photo number from the URL, and load image 123.
这是一些示例代码。在content主页的部分，我希望能够链接到一个名为“#photo-123”的页面，并让它加载下面的“照片”页面。然后我会从 URL 中提取照片编号，并加载图像 123。
<!-- Home page -->
<div data-role="page" id="home">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content">
<p><a href="#photo" data-role="button">Photo ###</a></p>
</div>
</div>
<!-- Photo page -->
<div data-role="page" id="photo">
<div data-role="header">
<h1>Photo ###</h1>
</div>
<div data-role="content">
<img id="myphoto" src="" />
</div>
</div>
This is so I can reuse the URL, i.e. the user can reload that page directly.
这样我就可以重用 URL，即用户可以直接重新加载该页面。
Is it possible to pass parameters inside a hash URL with jQuery mobile? (or indeed with HTML generally - I know it's possible with e.g. the BBQ plugin, but I'd rather avoid plugins if possible)
是否可以使用 jQuery mobile 在哈希 URL 中传递参数？（或者确实通常使用 HTML - 我知道使用例如 BBQ 插件是可能的，但如果可能的话，我宁愿避免使用插件）
回答by Art
You can use global event hooks and data- tags to process and store parameters for internal (i.e. between #blah -> #blah2) transitions:
您可以使用全局事件挂钩和数据标记来处理和存储内部（即在 #blah -> #blah2 之间）转换的参数：
In your HTML you can go
< a href="#photo" data-params="id=123">....< /a>
Intercept the clicks on all links and look for a specific data- element, say, data-params:
$('a').live('click', function(e) { params = $(e.target).jqmData("params") } )
在你的 HTML 你可以去
<a href="#photo" data-params="id=123">....</a>
拦截所有链接的点击并查找特定的数据元素，例如 data-params：
$('a').live('click', function(e) { params = $(e.target).jqmData("params") } )
In this case you are creating a global paramsobject, which you should be able to access in a uniform manner from all your code.
在这种情况下，您正在创建一个全局params对象，您应该能够从所有代码中以统一的方式访问该对象。
回答by Nick
If you can structure your hashes like #photo?id=123, something like this can work:
如果您可以像#photo?id=123 那样构建您的散列，则可以使用以下方法：
$("#page").live("pageinit", function(e) {
var id = $(e.target).attr("data-url").replace(/.*id=/, "");
//now you have the id, do page-rendering logic
});
And to catch direct-links:
并捕捉直接链接：
if (window.location.hash && window.location.hash.indexOf("?") !== -1) {
var pageID = window.location.hash.split("?")[0];
$(pageID).trigger("pageinit");
}
回答by Sparkle
Check this fix out:
检查此修复程序：
https://github.com/flodev/jquery-mobile/commit/f3b2e5d84493f3b8b27f9f423863cab2a416007a
https://github.com/flodev/jquery-mobile/commit/f3b2e5d84493f3b8b27f9f423863cab2a416007a
Had a similar issue but adding this one line of code to the jquery.mobile js file allowed me to pass parameters in the URL without having to add plugins and js routing solutions.
有一个类似的问题，但将这一行代码添加到 jquery.mobile js 文件允许我在 URL 中传递参数，而无需添加插件和 js 路由解决方案。
回答by mcgrailm
you want to use .changPage()function
你想使用.changPage()函数
$("[name=button_name]").click(function() {
$.mobile.changePage('anotherPage.php?parm=123','slide',false,true);
});
回答by Mark Coleman
You could do something like this:
你可以这样做：
$('#photo').ready(function () {
var photoId = window.location.hash.replace("#photo", "");
$("#myphoto").attr("src", "http://dummyimage.com/600x400/000/" + photoId);
window.location.hash = "#photo";
});
This will force jQuery to transition to the #photopage, however need to stop jQuery mobile from trying to load up #photoffffirst. This ends up causing a quick flash on the page that there was an error loading the page and then the redirect to correct #hash tag.
这将强制 jQuery 转换到#photo页面，但是需要先阻止 jQuery mobile 尝试加载#photofff。这最终会导致页面上快速闪烁，表明加载页面时出错，然后重定向到更正 #hash 标签。
Update
If you disable hash tracking on that page you should be able to remove the error message display.
更新
如果您在该页面上禁用哈希跟踪，您应该能够删除错误消息显示。
<script type="text/javascript">
$.mobile.hashListeningEnabled = false;
</script>
$('#photo').ready(function () {
var photoId = window.location.hash.replace("#photo", "");
$("#myphoto").attr("src", "http://dummyimage.com/600x400/000/" + photoId);
$.mobile.changePage("#photo");
});
