开发者

noscript to filter add hyperlinks - Clean JavaScript degrade

开发者 https://www.devze.com 2023-01-26 07:44 出处:网络
My project relies on JavaScript to dynamically display content on a hyperlink click.In order to make it cleanly degrade without JavaScript en开发者_如何学编程abled, I\'m simply showing all page conten

My project relies on JavaScript to dynamically display content on a hyperlink click. In order to make it cleanly degrade without JavaScript en开发者_如何学编程abled, I'm simply showing all page content and using hyperlinks and anchors to connect the pieces.

I'm relying on jQuery to identify the click of the hyperlink by ID, so without JavaScript I need to add in the anchor.

Is this a good use of noscript? Mainly, will this always add the hyperlink without JavaScript?

<div id="link1">
  <noscript><a href="#link1content"></noscript>
    1. Link Name Here
  <noscript></a></noscript>
</div>


Elements contain other elements, not just tags. The start tag and the end tag must be in the container. A validator would have picked this up.

You shouldn't be using noscript for this in the first place though. Something more along the lines of:

<a class="enhanced_in_some_way" href="#link1content">1. Link Name Here</a>

with

jQuery('a.enhanced_in_some_way').click(function (event) {
    var link = this;
    var name = /#([^#]+$)/.exec(link.href);
    do_something_with(name);
    event.preventDefault();

});

… is probably the way forward.


In many browsers, this will work, but I wouldn't recommend it. It completely breaks the structure of the HTML and is not guaranteed to work in all browsers or even future versions of browsers that it does work in now.


Actually, you don't need noscript here. Put the anchor destination into the hyperlinks by default, and in your jQuery or javascript click function, finish with a return false or event.preventDefault();. This will prevent the link from being followed if JavaScript is enabled, and results in a followed anchor if it is disabled. You're covered both ways with minimal overhead.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号