Internal Or External Link

Question

I have a small problem with my links. I am trying to have it so when a link is checked, It uses javascript to handle page loading, This is fine, But before it loads the page I want it to take the URL it passed to JavaScript and check if it is external, If it is, Then alert them, Else just continue... heres the code I have so far:

JavaScript Document:

function loadPage(page, tag, ext) {
    if (tag) {
        fadeOut(tag);
        setTimeout(function() {
            if (page) {
                console.log('Attempting To Buffer Next Page...');
            } else {
                console.log('ERROR: No Page To Buffer');
                return; 
            }
            if (ext) {
                console.log('Loading Custom Extension');    
                if (checkExternal(page) == true) {
                    window.location = "external.php?url="+page+"."+ext
                } 
                else {
                    window.location = page+"."+ext
                };
            } else {
                console.log("No Custom Extension, Using .hmtl");
                if (checkExternal(page) == true) {
                    window.location = "external.php?url="+page+".html"
                } else {
                    window.location = page+".html"
                };
            }
        }, 500);
    }
    else
    {
        console.log("ERROR: Tag Field Empty, Cannot Load Page") 
    };
};

Html Link:

<a onclick="loadPage('https://github.com/hbomb79/securitySystemPro/issues', 'body');" class="url">GitHub</a>

I have tried other results on here, But they all check the href attribute, I need to check a URL passed to a function that returns true if its external.

Anyone got any ideas?

That is a function that fades out the tag specifed using jQuery, So I basically pass the body tag to that so it fades out: http://www.harryfelton.host56.com/ Is my website where you can see this in effect. — Harry, Nov 23 '14 at 08:49

Burdock · Accepted Answer · 2014-11-23T09:03:22.487

0

By comparing a click event's .hostname with location.hostname you can easily check if a link is still local.

In the code below I apply a .click event to the class link : Meaning many elements can use the link class to be included in the event handling.

I personally find it preferable to use this method as it requires no changes to the main HTML document. That being said, you could always use onclick="function()" and get the same results.

 $(".link").click(
   function(e) {
     if (e.target.hostname === location.hostname) {
       console.log("going local")
       return true;
     } else if (confirm("Do you with to leave this website?")) {
       console.log("Leaving Website");
       return true;

     } else {
       console.log("Staying here");
      return false;
     }

   });

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>
  <a class="link" href="http://somewebsite.com"> somewebsite.com </a>
  <a class="link" href="#"> # (local) </a>


</body>

</html>

edited Nov 23 '14 at 09:03

answered Nov 23 '14 at 08:22

Burdock

1,085
1
9
22

Hmm, Well in my current code I am using an onclick event, Which passes the URL of the page, How would I check if that is external... Would it be something like this: `function checkExternal(url) { if (url.target.hostname === location.hostname) { console.log("Going local") return true; } else if (confirm("Do you with to leave this website?")) { console.log("Leaving Website"); return true; } else { console.log("Staying here"); return false; } });` And then just call this from the function in the main question? -Thanks – Harry Nov 23 '14 at 08:47
By the way, the second link also asks for confirmation, even though it is local... – Harry Nov 23 '14 at 08:54
If you want to manually pass in the url, you will need a nasty looking regular expressions parse out the host name. The event handler does this automatically thus creating `target.hostname`, so that's another reason to use Jquery xP – Burdock Nov 23 '14 at 09:01
The second answer here explains how to parse a url if you really don't want to use Jquery : http://stackoverflow.com/questions/736513/how-do-i-parse-a-url-into-hostname-and-path-in-javascript – Burdock Nov 23 '14 at 09:02
I removed the second link : I forgot that the code snippets are not actually hosted on stackoverflow.com. – Burdock Nov 23 '14 at 09:08
I want to use jQuery, I just don't know how, I'll check out the link anyways. I just want to be able to give it the url to check. – Harry Nov 23 '14 at 09:22
Using a function caller is not exactly best practices : if you are going down that road read url parser I linked – Burdock Nov 24 '14 at 01:32
Thank you, I have done it, Here is the final code for anyone interested: `function checkExternal(href) { var location = document.createElement("a"); location.href = href; if (location.host == "") { console.log("Hostname Is Empty, Local Link"); location.href = location.href; } else if (location.host == "www.harryfelton.host56.com") { console.log("Hostname Matches Current Domain, Assuming Local"); } else { console.log("Hostname External"); return true } return false; };` I simply call this from the JS function in the question. Thanks – Harry Nov 24 '14 at 03:01
#1: overwriting location is a very bad idea, #2 hard coding your variables is not best practice either. Have you tried the code I supplied above? – Burdock Nov 24 '14 at 03:52
What do you mean, Overwriting Location... I made small adjustments: `function checkExternal(href) { var location = document.createElement("a"); location.href = href; if (location.host == "") { console.log("Hostname Is Empty, Local Link"); location.href = location.href; } else if (location.host == window.location.hostname) { console.log("Hostname Matches Current Domain, Assuming Local"); } else { console.log("Hostname Of Url Doesnt Match: "+window.location.hostname); return true } return false; };` What code have you supplied, I looked at the link you gave – Harry Nov 24 '14 at 08:12
Yeah, But they arent href, they are calling a function so the page can transition correctly, So I have to use a function for that, It seems easier to me to just use a function rather than a seperate href tag. Anyways, Im happy with how it works, If I encounter issues then I shall reconsider – Harry Nov 24 '14 at 09:30

Internal Or External Link

1 Answers1