window.location 在 IE7/8 中无法正常工作

Question

我有一个 div，里面有一个 a。我想单击 div 并遵循与 a.相同的 url。这是 HTML：

<div class="overview white getchildurl">
    <p class="w70">
    05-02-2011
    </p>
    <a class="button" href="details/">Details</a>
    <span class="clear"></span>
</div>

我有这个脚本：

$('.getchildurl').each(function() {     
    $(this).click(function() {
        var href = $(this).children('a').first().attr('href');
        window.location = href;
    });
});

这适用于 Firefox 3.6、Chrome、Safari，但不适用于 IE7 和 IE8。它重新加载页面，但保持在同一页面上。我检查了 var href，它有正确的 url，但没有去那里。我做错了什么？

谢谢。

编辑：使其成为绝对 URL 使其工作。这是新脚本：

$('.getchildurl').each(function() {     
    $(this).click(function() {
        var href = $(this).children('a').first().attr('href');
        var host = window.location.hostname;
        window.location = 'http://' + host + '/' + href;
    });
});

Answer 1

我将其发布为不同的答案，因为它是不同的答案。如何使用 JavaScript 解决问题，而不是使用 HTML 和 CSS 解决问题。

尝试更改您的 JavaScript 以显示并确保值是您认为的值

$(this).click(function() {
    var href = $(this).children('a').first().attr('href');
    alert(href)
    alert(href.length)
    window.location = href;
});

这将显示href 和href 长度。确保长度匹配。如果长度太大，说明有隐藏字符。

如果您确定问题是由语法引起的，则可以使用 JavaScript 完成许多 URL 修复/转换。例如，删除尾部斜杠时可以使用

$(this).click(function() {
    var href = $(this).children('a').first().attr('href');
    window.location = href.replace(/\/$/, '');
});

此外，如果这样可以解决问题，可以使用 JavaScript 将 URL 转换为绝对 URL。任何其他麻烦甚至不可见的字符都可以删除或替换。

您能否在互联网上发布一个网页，我们可以访问该网页以查看我们自己的 IE 副本上的问题？您能否发布一个 HTML 文件，我们可以将其复制到我们的机器并在浏览器中查看？您对另一个问题的评论告诉我您有某种 XHTML 严格的 DOCTYPE。如果我们中的一个人可以让问题发生在我们身上，那么它更有可能得到解决。

Answer 2

正如我在评论中提到的，我不是 100% 确定它（IE7+8 如何处理.location 对象），但毕竟它只是一个对象。

尝试在location 对象中显式设置href 属性：

window.location.href = href;

Answer 3

虽然这个话题很老，但它并没有过时。我刚遇到同样的问题。

window.location = href;

工作正常，如果你在此之后输入另一个命令。

window.location = href;
return false;

这对我有用，并使用正确的 URL 进行重定向。希望这可以帮助其他有同样问题的人。

Answer 4

不完全是您问题的直接答案，但我有两个建议

1. 你可能只是想试试 jQuery 是否会为你处理它

   $(this).children('a').first().click()
   

   编辑：这并没有解决问题

2. 此外，您可能只想将整个<div 放入带有style="display: block; text-decoration: none" 的<a 标记中。您可以使用字体颜色和下划线使里面的文本看起来像您想要的那样。此外，此解决方案不需要 JavaScript。它还使整个 div 显示为有焦点，而不仅仅是 a 或什么都没有。