Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    104
    Thanks
    13
    Thanked 0 Times in 0 Posts

    JS to set a target _Blank on an href with no ID or Class

    Hello Guys,

    I am working on coding a Javascript that will watch for a click event on an href that does not have an id or class. The links are generated automatically and I can't add an ID or Class to them. I need the script to watch for the click event and use a target = "_Blank" to open a new window.

    Any help would be appreciated.

    This is what I have so far but doesn't work.

    Here my code

    HTML

    <a href="http://test.com/resources/blog/">Blog</a>

    JS

    document.addEventListener("click", function (e) {

    if (e.event.target.href == "http://test.com/resources/blog/" && !e.target.hasAttribute("target")) {
    e.target.setAttribute("target", "_blank");
    }
    });

  • #2
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    my effort


    Code:
    <a href="http://test.com/resources/blog/">Blog</a>
    
    <script>
    var a = document.getElementsByTagName('a');
    for (var i=0; i<a.length; ++i){
    a[i].addEventListener("click", function (e) {
    	var x = e.currentTarget;
    	var tar = x.hasAttribute("target");
    	if(!tar){
    			x.setAttribute("target", "_blank")
    		}
    	});
    }
    </script>
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    104
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Hi Low Tech thanks for the help.
    The problem is that I have many links on the page so i can't just reference the anchor tag. I need the script to only look at the URL "http://test.com/resources/blog/" and add a target to it.

  • #4
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    i can't just reference the anchor tag
    Did you try the script?

    It catches ALL anchor tags on the page and not just the anchor tag you posted if that is what you mean.

    LT
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Posts
    104
    Thanks
    13
    Thanked 0 Times in 0 Posts
    I got it to work


    Here is the final code that works

    HTML
    <a href="http://test.com/resources/blog/">Blog</a>


    JS
    document.addEventListener("click", function (e) {
    if (e.target.href == "http://test.com/resources/blog/" && !e.target.hasAttribute("target")) {
    e.target.setAttribute("target", "_blank");
    }
    });

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by low tech View Post
    my effort


    Code:
    <a href="http://test.com/resources/blog/">Blog</a>
    
    <script>
    var a = document.getElementsByTagName('a');
    for (var i=0; i<a.length; ++i){
    a[i].addEventListener("click", function (e) {
    	var x = e.currentTarget;
    	var tar = x.hasAttribute("target");
    	if(!tar){
    			x.setAttribute("target", "_blank")
    		}
    	});
    }
    </script>
    This code is inefficient. If you have 100 links on the page, the click handler is attached 100 times! I advice you to learn Event Delegation technique which the OP is using.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    I advice you to learn Event Delegation technique
    Thanks Glenngv. I'll look at that.

    @dk4210
    glad you got it working

    LT
    Last edited by low tech; 04-04-2014 at 01:44 AM. Reason: spelling
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,304
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by dk4210 View Post
    document.addEventListener("click", function (e) {
    if (e.target.href == "http://test.com/resources/blog/" && !e.target.hasAttribute("target")) {
    e.target.setAttribute("target", "_blank");
    }
    });
    Keep in mind that every click in the document will trigger this event. You may want to limit the listener scope to the relevant part of the document for efficiency's sake.

    Alternatively, you can set a mutation observer on an element in which links will be generated to add the target attribute instead of triggering an attribute test on every click.
    Last edited by Arbitrator; 04-06-2014 at 01:40 AM.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •