www.webdeveloper.com
Results 1 to 7 of 7

Thread: Using javascript to modify every link on a page??

  1. #1
    Join Date
    Sep 2006
    Location
    Wixom, MI
    Posts
    292

    Using javascript to modify every link on a page??

    What I am trying to do is insert a simple piece of javascript somewhere on the page that will modify the href location of every link on the page to a specific value defined in the script


    Such as

    Lets say for example the page contains 3 links


    <a href="http://www.somesite.com/page1.html">Some site</a>
    <a href="http://www.somesite.com/page2.html">Some site 2</a>
    <a href="http://www.somesite.com/page3.html">Some site 3</a>

    I insert a piece of javascript code that changes all the links on the page to the following (without me manually having to change the links within the code)


    <a href="http://www.newsite.com/page.php?rp=http://www.somesite.com/page1.html">Some site</a>
    <a href="http://www.newsite.com/page.php?rp=http://www.somesite.com/page2.html">Some site 2</a>
    <a href="http://www.newsite.com/page.php?rp=http://www.somesite.com/page3.html">Some site 3</a>


    I am doing this so that once the bit of javascript is entered into the code of the page, all links on that page get replaced with a link pointing to a special offer page(including the original link as a variable)

    Can anyone advise how I write the javascript to update all links on the page on the fly every time the page loads??

  2. #2
    Join Date
    Dec 2009
    Location
    Colorado
    Posts
    104
    Here is one way.

    var aArray = document.getElementsByTagName("A"); // get all the a tags
    for (i = 0; i < aArray.length; i++) {
    aTag = aArray[i];
    aTag.href = "newHref" + i; //or whatever you want the new href tobe
    }

  3. #3
    Join Date
    Sep 2006
    Location
    Wixom, MI
    Posts
    292
    Thats great thanks

    But one issue Im having with it

    It not only replaces the href of the <a links but it also replaces the text of the link too

    So <a href="/linkhere.html">Text here</a>

    Gets replaced to <a href="http://www.somesite.com/page.php?rp=linkhere.html">http://www.somesite.com/page.php?rp=linkhere.html</a>

  4. #4
    Join Date
    Sep 2006
    Location
    Wixom, MI
    Posts
    292
    Just to add this only seemed to happen on a few of the text links ones with mailto: in the link was what i noticed and an email address in the text

  5. #5
    Join Date
    Dec 2009
    Location
    Colorado
    Posts
    104
    var aArray = document.getElementsByTagName("A"); // get all the a tags
    for (i = 0; i < aArray.length; i++) {
    aTag = aArray[i];
    aTag.href = "newHref" + i; //or whatever you want the new href tobe
    aTag.innerHTML = "my new text";
    }
    Reply With Quote

  6. #6
    Join Date
    Dec 2009
    Location
    Colorado
    Posts
    104
    Code:
    //Sorry here are better instructions.
    //Place this between your <head> and </head> tags.
    
    <script>
    function changeLinks() {
       var aArray = document.getElementsByTagName("A"); // get all the a tags
       var aTag = "";
       for (i = 0; i < aArray.length; i++) {
          aTag = aArray[i];
          aTag.href = "http://www.mysite.com/newHref" + i + ".html; 
          //or whatever you want the new href tobe
          aTag.innerHTML = "my new text"; //changes the visible text
       }
    }
    window.onload = changeLinks;
    </script>

  7. #7
    Join Date
    Sep 2006
    Location
    Wixom, MI
    Posts
    292
    Thanks for all your help

    With a few modifications it met my needs perfectly

    Code:
    <script type="text/javascript">
    var aArray = document.getElementsByTagName("a"); // get all the a tags
    for (i = 0; i < aArray.length; i++) {
    aTag = aArray[i];
    aOldhref = aTag.href;
    aOldText = aTag.innerHTML;
    aTag.href = "http://www.somesite.com/page.php.php?rp=" + aOldhref; //Modify the tags
    aTag.innerHTML = aOldText;
    } 
    </script>
    This now makes sure the original text of the link stays the text of the link and that the old href tag gets added to the end of the new href tag that is added in

    Thanks for all the help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles