JavaScript 将变量放入 url，然后在重新加载时使用它答案

【问题标题】：JavaScript put variably into url, then use it if reloadedJavaScript 将变量放入 url，然后在重新加载时使用它
【发布时间】：2010-10-02 21:00:28
【问题描述】：

我们正在开发一个音乐页面，以列出专辑、歌曲并添加歌词。

我们在每张专辑下方都有一个“查看更多”，单击它会显示歌曲列表（使用 jquery，使隐藏的 div 向下滑动）。我们希望在有人点击歌曲时向 URL 添加一个变量（或者如果他们“隐藏”歌曲，则将其删除），以便创建指向该部分的永久链接。如果有人通过它，它将自动显示该 div 打开。

所以链接应该看起来像这样 http://www.greendayauthority.com/music/catalog.php#album=1039 或者 http://www.greendayauthority.com/music.catalog.php?album=1039

（有人可以帮我找出更好的使用方法吗？在“#”和“？”之间

我们希望对单个歌曲的歌词做同样的事情。如果有人点击歌曲标题，它会在 URL 中添加另一个变量，其中包含歌曲 ID。

因此，如果有人单击歌曲标题，那么它将是 http://www.greendayauthority.com/music/catalog.php?album=1039&song=3

我们可以处理所有代码以使所有内容出现在页面上，但我不知道如何使用 javascript 在页面上添加变量，以便如果有人想将歌词链接到特定歌曲，他们可以共享该链接，当他们访问时，将显示正确的 div。

有人可以帮我指出正确的方向吗？也欢迎任何有关更好方法的提示。

谢谢！

【问题讨论】：

这些 div 的内容是从 ajax 加载的，还是已经在页面上 - 只是隐藏了？
刚刚隐藏。不管怎样，我们都可以做到。

标签： javascript url variables

【解决方案1】：

如果你用 ? 分隔它，它是一个查询字符串，这是将变量放到页面上的正常方式。如果你用#来做，它是哈希，它指的是页面内的导航。

如果您使用#，您可以在不刷新页面的情况下进行导航。如果您从 Javascript (location.href = blah?album=1039) 将项目添加到查询字符串，页面将重新加载。我不认为那是你想要的。

在任何情况下，当您单击链接以显示隐藏的 div 时，请不要更改 location.href。只需让您的锚标记在页面内导航，如<a href="#album1039"></a>

【讨论】：

听起来我们肯定想要使用#。我们不想刷新页面，如果需要，只需要有一个永久链接。

【解决方案2】：

这是我的尝试：

所需代码：

var HashSearch = new function () {
   var params;

   this.set = function (key, value) {
      params[key] = value;
      this.push();
   };

   this.get = function (key, value) {
       return params[key];
   };

   this.keyExists = function (key) {
       return params.hasOwnProperty(key);
   };

   this.push= function () {
       var hashBuilder = [], key, value;

       for(key in params) if (params.hasOwnProperty(key)) {
           key = encodeURIComponent(key), value = encodeURIComponent(params[key]);
           hashBuilder.push(key + ( (value !== "undefined") ? '=' + value : "" ));
       }

       window.location.hash = hashBuilder.join("&");
   };

   (this.load = function (paramString) {
       params = {}
       var hashStr = paramString || window.location.hash, hashArray, keyVal
       hashStr = hashStr.substring(1);

       if (hashStr === "") return;

       hashArray = hashStr.split('&');

       for(var i = 0; i < hashArray.length; i++) {
           keyVal = hashArray[i].split('=');
           params[decodeURIComponent(keyVal[0])] = (typeof keyVal[1] != "undefined") ? decodeURIComponent(keyVal[1]) : keyVal[1];
       }
   })();
};

初始化代码：

$(function () {
    showDiv();

    $(".view-more-hash").live('click', function () {
       HashSearch.load(this.hash);
       showDiv();
    });
});

function showDiv() {
    if (HashSearch.keyExists('album')) {
        var albumDiv = $("#album" + HashSearch.get('album')).show();

        if (HashSearch.keyExists('song')) {
           albumDiv.find("#album" + HashSearch.get('album') + "song" + HashSearch.get('song')).show()
        }
    }
}

您的链接将如下所示：

<a href="#album=2">View album</a>
<a href="#album=2&song=3">View song</a>

您的内容：

<a name="album=2"></a> // auto scroll to location.. not required
<div id="album2">
   <div id="album2song3"></div>
</div>

【讨论】：