為非JavaScript用戶編程

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屬性中。

Answer 2

您在評論中提到此方法非常繁瑣。 我主要擔心這。 您可能想找到一種自動化的方法。 我已經提出了使用rel屬性作為選擇器的解決方案。

<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

不必太擔心頁面加載時間。
這僅是停止下載所需時間的度量，而不是一個人能夠使用該網站所需時間的度量。

當它是一個值得關注的是，當頁面加載模塊使用一個頁面（或查看頁面）的能力-如果您加載所有的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 */ });