1

为了确保我的网站对非 JavaScript 用户友好，我在构建它时不使用 JavaScript，并在构建网站后添加它。

所以现在我有一个链接如下：

<a href="http://example.com/panel" id="showPanel">Expand</a>

但是如果启用了 JavaScript，我将使用以下代码：

$("#showPanel").attr("href", "#showPanel");

使链接指向 #showPanel 而不是http://example.com/panel

虽然这一切都很好，但我不禁想知道是否有更好的方法来做到这一点？

4

3 回答 3

1

在页面底部加载 JS 文件。如果您正在运行的 JavaScript 是页面已经加载后，那么应该没有问题。

$(document).ready(function() {
    // change links.
});

如果您试图减少 JS 的原始行数，您可以尝试遵循一些约定并自动更改 URL：

var changeAllLinks = function () {
    var allLinks = $("a[href^='http://example.com']");
    for (int i = 0; i < allLinks.length; i++) {
        allLinks[i].attr("href", "#show" + /* substring for the path */);
    }
};

只是一个想法，因为类似的东西（从概念上）可能有效。您可以遵循一个约定，其中没有 JS 的所有链接都在表单中<a href="http://example.com/foo">，并使用 JS 将它们更改为<a href="#showFoo">. 这样，您可以遍历所有链接和子字符串以获取路径，将第一个字母大写，将 a添加到前面，然后像您正在做的那样#show将其弹出到属性中。href

于 2012-10-02T19:41:12.863 回答
0

您在评论中提到这种方法非常繁琐。这将是我最关心的问题。您可能想找到一种方法来自动执行此操作。我使用 rel-attribute 作为选择器提出了这个解决方案。

<a href="showThing1" rel="javascriptable">This links via javascript</a>
<a href="showThing2">Always links to a new page</a>

// load when ready
$(document).ready(function() {
    // Find all links with the correct rel attribute
    $('a[rel="javascriptable"]').each(function(index) {
        // Change the href attribute
        oldlink = $(this).attr('href');
        newlink = # + oldlink;
        $(this).attr('href', newlink);
    });
});

我的 jquery 有点生锈，所以我猜复制/粘贴并不能正常工作

于 2012-10-02T19:56:34.933 回答
0

不要太担心页面加载时间。
这只是衡量内容停止下载需要多长时间的衡量标准，而不是衡量一个人能够使用该网站需要多长时间的衡量标准。

令人担忧的是，页面加载何时会阻止使用页面（或查看页面）的能力 - 例如，如果您在页面顶部加载所有 JS，在加载 CSS 之前。

就个人而言，我认为您的格式很好，但看起来您正在做很多id-assignment 和 jQuery手动监听，这是一件可怕的事情。

为什么不做类似使用 html5data-set属性的事情呢？

<a data-linkType="JS-Override" data-methodName="doSomethingInternally">link</a>

然后，您可以从您的程序中调用dataset该元素。

var anchors = document.getElementsByTagName("a");
[].forEach.call(anchors, function(anchor) {
    if (anchor.dataset.linkType !== "JS-Override") { return; }

    var extension = anchor.dataset.methodName;
    anchor.addEventListener("...", function () { setHash(extension); }, false); 
});

这是一个非常微不足道的例子，但它确实有效。目前对数据集的支持很好。为了让它在包括旧 IE 在内的所有浏览器上工作，它需要被包装在一个简单的 API 中（新浏览器从数据集中读取，旧浏览器需要通过它们的属性列表来读取“data-XXX”属性——jQuery 包装了这个进入.data();

And of course, you might have a lot of anchors on your page, and only a handful of them are going to do the thing that you're looking for right now... ...so the trick there would be to grab them by a class that you give them, so that you aren't sorting by every a on the page.

...or, alternatively, if you know that each a which is a special internal page, is contained within a menu div, or a settings div or whatever, then just grab those ones:

var menu = document.getElementById("myMenu"),
    jsLinks = menu.getElementsByTagName("a");

[].forEach.call(jsLinks, function (anchor) { /* everything mentioned before */ });
于 2012-10-02T20:10:49.077 回答