6

如果 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 检索哈希值的技巧是什么？

URL 是这样构建的：

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

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

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

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

单击 Chrome 中的“按状态搜索”选项卡，然后单击某个状态，您将看到该问题。浏览器显示它想要访问的 url 是正确构建的。——</p>

谢谢。

4

7 回答 7

5

你可能想试试这个：

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

click 事件在 hashchange 事件之前触发，因此您不能依赖地图点击工具（即使您延迟了它）。

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

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

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

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

于 2013-10-15T14:48:57.077 回答
3

问题不是很明显，还是我很傻？在下面的函数中，你处理地图上的点击，你听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（锚点）本身并没有更改哈希，这使得您的代码中似乎有某个地方正在阻止它。

于 2013-10-15T15:02:10.440 回答
0

当我签入 Chrome 的检查器时，您的锚似乎使用href了不同的命名空间，该命名空间未在您的svg标签中声明。

<a xlink:href="#SD">

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

从这个链接，我发现：

绑定所需的命名空间

SVG 是一种命名空间 XML 方言，因此 SVG 文档中使用的所有 XML 方言都必须绑定到它们的命名空间，如 XML 建议中的命名空间中指定的那样。至少绑定 SVG 和XLink 命名空间是明智的，也可能绑定 XML Events 命名空间。

因此，尝试添加xmlns:xlink="http://www.w3.org/1999/xlink"到您的 SVG 标签。

编辑

正如我在您发布的图片中看到的那样，您xmlns:xlink在.svg 中声明得很好。但是在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了。

引用之前的链接：

绑定 SVG 命名空间时，请注意不要键入 xmlns:svg 而不仅仅是 xmlns。这是一个容易犯的错误，但却会破坏一切。它没有将 SVG 设为默认命名空间，而是将其绑定到命名空间前缀“svg”，这几乎肯定不是您想要在 SVG 文件中执行的操作。然后，符合标准的浏览器将无法识别任何没有明确命名空间前缀的标签和属性（如果不是全部，可能是大多数），并且无法将您的文档呈现为 SVG。

关于 xlink 的附加文档

于 2013-10-15T15:51:10.833 回答
0

在 Chrome 中，只能设置 hash will anchor，例如：

<a href="#exemplo" />

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

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

于 2013-10-10T15:03:35.953 回答
0

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

这个问题的答案最终是我需要使 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 提要中提取数据，并将其显示在 Chrome 和 Firefox 的页面上。

于 2013-10-21T15:51:08.597 回答
0 
var myURL = document.URL; //example http://www.ourdomain.com/thispage.html#IL
var getTheMagicWord = myURL.split("#");
console.log(getTheMagicWord[1]); //logs IL
于 2013-10-22T03:28:22.580 回答
0

稍微修改一下代码怎么样

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

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

IE

$("#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);），则窗口尚未更改位置，因此该点不存在哈希。

于 2013-10-15T15:09:47.877 回答