非 pushState 浏览器中的 JQuery Mobile 查询字符串问题答案

【问题标题】：JQuery Mobile Query String Issue in non pushState browsers非 pushState 浏览器中的 JQuery Mobile 查询字符串问题
【发布时间】：2011-11-21 07:27:55
【问题描述】：

我正在尝试将变量 cid 从 JQuery Mobile beta 3 中的查询字符串中提取出来。

普通 URL 的示例是 /category.php?cid=23

JQuery Mobile URL 示例 /#/category.php?cid=23

由于 JQuery Mobile Beta 3 的 url 重写，我可以在大多数浏览器中正常使用以下函数将变量从查询字符串中提取出来。但是 IE 不支持新的浏览器历史功能。 https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

因此，我需要一种从上面看到的 JQuery Mobile Url 中提取查询字符串的方法，而我通常在下面使用的以下函数不能正常工作。

function getQuerystring(key) {
   var re=new RegExp('(?:\\?|&)'+key+'=(.*?)(?=&|$)','gi');
   var r=[], m;
   while ((m=re.exec(document.location.search)) != null) r.push(m[1]);
   return r;
}

我正在寻找一个替代正则表达式，它可以在不支持 history.pushState 或其他一些解决方案的浏览器中找到散列变量。我在文档中搜索了此问题的解决方案，但没有找到任何东西。我认为这将是 JQuery 移动团队已经考虑并解决的问题，我可能只是缺少一些非常明显的东西。提前感谢您的帮助。

【问题讨论】：

相关：stackoverflow.com/questions/901115/…
这种情况下该函数也会失效。

标签： javascript jquery regex url-rewriting jquery-mobile

【解决方案1】：

工作演示（我认为）

http://jsfiddle.net/phillpafford/VXV3R/

相关链接：

How can I get query string values in JavaScript?

$('#page2').live('pageshow', function(event, ui) {
    alert('Page 2 - CID: ' + getParameterByName('cid'));
});

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

HTML（将 rel="external" 添加到链接）

<div data-role="page" id="home">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">
                Home Page
            </li>
            <li>
                <!-- 
                    Pass Parm Here before the hash page 
                    and treating link as external 
                -->
                <a href="?cid=1234#page2" rel="external">Page 2</a>
            </li>
        </ul>                
    </div>
</div>
<!-- page 2 -->
<div data-role="page" id="page2">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">
                Page 2
            </li>
            <li>
                <a href="?cid=4321#home">Home Page</a>
            </li>
        </ul>
    </div>
</div>

【讨论】：

【解决方案2】：

好的，无论您使用哪种浏览器，甚至您使用 JQuery Mobile 的方式如何，这里的功能都可以处理这两种情况。这段代码并不完美，我很高兴它现在可以工作。如果以及当我更新该功能时，我会回来并在这里更新它。

首先代码查看是否存在哈希。如果有，它会在其中查找查询字符串，就好像它是一个 url。如果不是，它只是检查变量的 url。无论您在 JQuery Mobile 中检查什么状态，此代码都适用于检查特定的查询字符串变量。天气它是 pagecreate pageshow 或几乎任何其他事件，天气 JQuery Mobile Beta 3 是否通过 pushstate 重写了 url。

function getQuerystring(name) {
    var hash = document.location.hash;
    var match = "";
    if (hash != undefined && hash != null && hash != '') {
        match = RegExp('[?&]' + name + '=([^&]*)').exec(hash);
    }
    else {
        match = RegExp('[?&]' + name + '=([^&]*)').exec(document.location.search);
    }
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

【讨论】：