我想添加一些Ajax排序選項到列表中。由於我的網站目前運行時沒有使用JavaScript,因此我希望它可以在關閉它的人,老舊/移動瀏覽器或無腳本的情況下繼續運行。如果JavaScript被關閉或禁用,允許瀏覽器回退到鏈接的最佳方式是什麼?
如果在啓用JavaScript的情況下單擊鏈接時如何運行JavaScript塊,並且如果不是,則該鏈接會將瀏覽器指向新頁面。我想遠離hacky noscript標籤。
我想添加一些Ajax排序選項到列表中。由於我的網站目前運行時沒有使用JavaScript,因此我希望它可以在關閉它的人,老舊/移動瀏覽器或無腳本的情況下繼續運行。如果JavaScript被關閉或禁用,允許瀏覽器回退到鏈接的最佳方式是什麼?
如果在啓用JavaScript的情況下單擊鏈接時如何運行JavaScript塊,並且如果不是,則該鏈接會將瀏覽器指向新頁面。我想遠離hacky noscript標籤。
你的鏈接需要指向替代非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...
});
我會想象你可以把新頁面的URL放在HREF中,並且從onClick事件處理程序返回false來停止鏈接被捕獲。如果JS未啓用,則onClick將不會運行,這意味着HREF將被遵循。
對於關注點分離效果好,最好的辦法是使用的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()版本,但它取決於取消事件。
對不起,錯過了你的文章中的jQuery標籤,沒有意識到你正在尋找一個jQuery示例。 – 2009-08-19 08:18:04
這很酷,這是一個很好的例子。 – Sam152 2009-08-19 08:34:10
我會用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 for preventDefault – Wookai 2009-08-19 08:40:37
我簡單地寫下HTML,因爲它看起來像沒有JavaScript,然後修改內容,因爲它應該看起來啓用JavaScript。
在啓用JS的情況下,網站可能會加載速度稍慢,並且在構建時可能看起來有點不可思議,但功能依然存在。 在JS被禁用的情況下,網站保持原樣並且對於非JS用戶仍然可訪問
這個想法是UI完全相同,但新內容加載的方式不同。 – Sam152 2009-08-19 08:46:56
有人只是downvoted頁面上的所有內容,包括問題! – karim79 2009-08-19 08:21:00
這很奇怪,有人必須有一個糟糕的一天。 – Sam152 2009-08-19 08:35:40