Question

如果jQuery JavaScript在URL末尾返回哈希值，我正在使用以下代码段。它在FF中完美运行，但第4行的警报在Chrome中返回空。

似乎window.location.hash.substring(1)行不起作用。我也试过window.location.hash.replace("#", "");

// Map Clicks
$("#tab2.tab_content #map").delayed('click', 500, function() {
    state = window.location.hash.substring(1);
    alert(state);
    jsonLink = 'http://ml.uscm.org/ministries.json?state=' + state + '&active=true&callback=?';
    getMapResults();
    return false;
});

从Chrome中的网址检索哈希值的诀窍是什么？

URL构建如下：

http://www.ourdomain.com/thispage.html#IL

其中IL是州的两个字母缩写。我想得到“IL”。

我在这里有一个工作演示：

http://richcoy.com/locator/index2.html

点击Chrome中的“按州搜索”标签，然后点击状态，您就会看到问题所在。浏览器显示它要转到的URL正确构建。 -

感谢。

Answer 1

您可能想尝试这样做：

$(window).on('hashchange', function() {
    console.log(window.location.hash.substring(1));
});

点击事件在hashchange事件之前触发，因此您无法依赖地图点击工具（即使您将其延迟）。

支持的hashchange浏览器列表：http://caniuse.com/hashchange

如果您不必使用哈希，这是一个更简单的解决方案：

$("#tab2.tab_content #map a").click(function() {
    console.log($(this).attr('href').substring(1));
});

总之，您不应该使用任何类型的延迟方法。

Answer 2

问题不是很明显，还是我很傻？在以下功能中，您可以处理地图上的点击次数，然后聆听click，将其延迟500ms，然后运行您的功能。

$("#tab2.tab_content #map").delayed('click', 500, function() {
  state = window.location.hash.substring(1);
  alert(state);
  jsonLink = 'http://ml.uscm.org/ministries.json?state=' + state + '&active=true&callback=?';
  getMapResults();
  return false;
});

但是，当您alert state时，它已空，因为您还没有设置它。您的return false;也会阻止浏览器更改哈希值。

尝试这个功能，我打赌你会得到一些东西：

$("#tab2.tab_content #map").delayed('click', 500, function() {
  setTimeout(function(){
    var state = window.location.hash.substring(1);
    alert(state);
    jsonLink = 'http://ml.uscm.org/ministries.json?state=' + state + '&active=true&callback=?';
    getMapResults();
  }, 500);
});

让它运作的快捷方法是执行以下操作：

$("#tab2.tab_content #map a").delayed('click', 500, function(e) {
  state = $(this).attr('href').replace('#', '');
  alert(state);
});

然后您可以通过将其添加到回调中来轻松地手动更改哈希：

window.location.hash = state;

但你真正的问题是你的a（锚点）本身没有更改哈希值，这使得你的代码中某处似乎停止了它。

Answer 3

在Chrome中，只能设置哈希定位，例如：

<a href="#exemplo" />

如果您通过设置另一个元素的哈希来执行此操作，请尝试将其替换为锚点。

在此链接中，您会看到chrome接受哈希属性：
http://www.w3schools.com/jsref/prop_loc_hash.asp

Answer 4

如何修改代码，

$("#tab2.tab_content #map a").click(function(){
 console.log($(this).attr("href"));//this outputs the value to the console
});

这将为加利福尼亚输出#CA

即

$("#tab2.tab_content #map a").delayed('click', 500, function() {

    //state = window.location.hash.substring(1);
state = $(this).attr("href").substring(1);
        alert(state);
    jsonLink = 'http://ml.uscm.org/ministries.json?state=' + state + '&active=true&callback=?';
    getMapResults();
    return false;
    });

在代码中，如果在触发事件时放置断点（ln36 state = window.location.hash.substring(1);），则窗口尚未更改位置，因此此时哈希不存在。

Answer 5

当我检查Chrome的检查程序时，您的主持人似乎使用来自其他命名空间的href，而svg标记中未声明这一点。

<a xlink:href="#SD">

Firefox似乎很好，但Chrome似乎没有猜测如何正确解释这一点。

从link开始，我发现：

绑定所需的命名空间

SVG是一种命名空间的XML方言，因此是所有XML   SVG文档中使用的方言必须绑定到其命名空间   在XML推荐的命名空间中指定。这是明智的   至少绑定SVG和 XLink命名空间，也可能   XML Events命名空间。

因此，请尝试将xmlns:xlink="http://www.w3.org/1999/xlink"添加到SVG标记。

修改

正如我在您发布的图片中看到的那样，您在.svg中声明了xmlns:xlink。但是在Chrome的渲染页面中，没有这样的东西！

这就是我所看到的（Chrome 30）：

<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165 96" preserveAspectRatio="meet" style="overflow: hidden; position: relative;">

从这里开始，我不知道：标签的某些命名空间是否可以存储在浏览器的其他位置？我搜索过它的DOM属性，找不到它。

另一条线索：你也声明了xmlns:svg。

引自前一个链接：

绑定时，注意不要键入xmlns：svg而不是xmlns SVG名称空间。这是一个容易犯的错误，但可以打破一切。它不是将SVG作为默认命名空间将它绑定到命名空间前缀'svg'，这几乎可以肯定不是你想在SVG文件中做什么。符合标准的浏览器然后将无法识别任何没有的标签和属性显式名称空间前缀（可能大多数，如果不是全部）并且失败将您的文档呈现为SVG。

Additional doc about xlink

Answer 6

我感谢所有的帮助和建议。

问题的答案最终我需要为URL绝对而不是相对的路径。

举个例子，JavaScript中的一行来自：

"AL": {tooltip: 'Alabama', attr: {fill: '#F9B625', href: '#AL'}},

要：

"AL": {tooltip: 'Alabama', attr: {fill: '#F9B625', href: 'http://richcoy.com/locator/index2.html#AL'}},

在我为所有50个州更改此信息后，点击地图会正确地从jasonp Feed中提取数据，并将其显示在Chrome和Firefox中的页面上。

Answer 7

var myURL = document.URL; //example http://www.ourdomain.com/thispage.html#IL
var getTheMagicWord = myURL.split("#");
console.log(getTheMagicWord[1]); //logs IL

Chrome没有返回哈希值

7 个答案:

修改