2009-08-19 41 views
2

我想添加一些Ajax排序選項到列表中。由於我的網站目前運行時沒有使用JavaScript,因此我希望它可以在關閉它的人,老舊/移動瀏覽器或無腳本的情況下繼續運行。如果JavaScript被關閉或禁用,允許瀏覽器回退到鏈接的最佳方式是什麼?

如果在啓用JavaScript的情況下單擊鏈接時如何運行JavaScript塊,並且如果不是,則該鏈接會將瀏覽器指向新頁面。我想遠離hacky noscript標籤。

+0

有人只是downvoted頁面上的所有內容,包括問題! – karim79 2009-08-19 08:21:00

+0

這很奇怪,有人必須有一個糟糕的一天。 – Sam152 2009-08-19 08:35:40

回答

7

你的鏈接需要指向替代非JavaScript的網頁有效的HREF值,並且在點擊事件,你需要返回false,避免啓用JavaScript的瀏覽器跟隨鏈接:

<a id="aboutLink" href="about-us.html">About Us</a> 

$('#aboutLink').click(function() { 
    // ajax content retrieval here... 
    return false; // stop the link action... 
}); 
2

我會想象你可以把新頁面的URL放在HREF中,並且從onClick事件處理程序返回false來停止鏈接被捕獲。如果JS未啓用,則onClick將不會運行,這意味着HREF將被遵循。

2

對於關注點分離效果好,最好的辦法是使用的attachEvent(IE)或的addEventListener(標準)(或隱藏了一個工具包,從你喜歡的原型,jQuery的,MooTools的,YUI,夜光等)然後從JavaScript中取消該事件。假設此鏈接:

<a href='foo' id='mylink'>Link text</a> 

...這裏是一個使用原型的例子:

// Hook up your handler on page load 
document.observe("dom:loaded", function() { 
    // Look up the link, apply your handler 
    $('mylink').observe('click', yourHandler); 
}); 

// Your handler: 
function yourHandler(event) { 
    // Prevent the default action 
    event.stop(); 

    // ...your code here... 
} 

您不必指定鏈接的ID,有很多方法可以找到比其他的DOM元素ID,但它是一個方便的例子。

jQuery等人。 al。,將擁有自己的event.stop()版本,但它取決於取消事件。

+0

對不起,錯過了你的文章中的jQuery標籤,沒有意識到你正在尋找一個jQuery示例。 – 2009-08-19 08:18:04

+0

這很酷,這是一個很好的例子。 – Sam152 2009-08-19 08:34:10

5

我會用preventDefault

$('a').click(function(e) { 
    e.preventDefault(); //stop the browser from following 
    $('#someDiv').load('content.php'); 
}); 

<a href="no-script.html">Load content</a> 

如果沒有JavaScript中,HREF將緊隨其後。

+1

+1 for preventDefault – Wookai 2009-08-19 08:40:37

0

我簡單地寫下HTML,因爲它看起來像沒有JavaScript,然後修改內容,因爲它應該看起來啓用JavaScript。

在啓用JS的情況下,網站可能會加載速度稍慢,並且在構建時可能看起來有點不可思議,但功能依然存在。 在JS被禁用的情況下,網站保持原樣並且對於非JS用戶仍然可訪問

+0

這個想法是UI完全相同,但新內容加載的方式不同。 – Sam152 2009-08-19 08:46:56

相關問題