Question

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

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

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

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

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

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

虽然一切正常，但我不禁想知道是否有更好的方法可以做到这一点？

Answer 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">。这样你就可以循环遍历所有的链接和子字符串以获取路径，将第一个字母大写，在前面添加#show，然后将其弹出到href属性中，就像你正在做的那样。 p>

Answer 2

您在评论中提到此方法非常繁琐。这将是我主要担心的问题。您可能想要找到一种自动化方法。我使用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有点生疏，所以我想复制/粘贴并没有真正起作用

Answer 3

不要过分担心页面加载时间这只是衡量停止下载所需时间的标准，而不是衡量一个人使用网站所需时间的标准。

当时，问题是当pageload阻止使用页面（或查看页面）的能力时 - 就像你在页面顶部加载所有JS一样，例如，加载CSS。

就我个人而言，我认为你的格式很好，但看起来你正在做很多id - 作业，而jQuery正在聆听手工，这是一件非常糟糕的事情。

为什么不使用html5 data-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();

当然，你的页面上可能会有很多锚点，而且只有少数几个会在你现在正在寻找的东西......所以诀窍就是通过您提供的类来获取它们，这样您就不会按页面上的每个a进行排序。

...或者，如果您知道每个a是一个特殊的内部页面，它包含在菜单div或设置div或其他内容中，那么只需抓住那些：

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

[].forEach.call(jsLinks, function (anchor) { /* everything mentioned before */ });

为非JavaScript用户编程

3 个答案: