Using if/else by checking page URL

Posted on

Problem

You can place the script where you want the content to be checked and loaded in your design.

  • urlCheck is the name given to the function. You can change it, and if you do, change all urlCheck references within the code.

  • window.location.href returns the current address as http://…. Use this to identify certain pages on which you want the content to be loaded. Make as many if/else combinations as necessary.

  • document.write builds the content to be loaded first. Type with later in one unique line or create multiple document.writes for each line of your content.

<script language="JavaScript">
<!--
function urlCheck() {
if(
window.location.href=="address to check"
)
{
/* some code to load */
}else{
document.write('<div>testing my super loaded div code sample</div>')
}
}
urlCheck() /* autoLoadFunction */
//-->
</script>

Solution

<script language="JavaScript">

The script tag does not have a property language anymore, that property is deprecated. You should use the property type instead. Also the correct value for that property would be text/javascript.


<!--

This is a relic from somewhere before all browsers could do JavaScript, please don’t do it anymore.


function urlCheck() {

Nothing to say here. Except you should think about making it a habit to activate strict mode by default.


if(
window.location.href=="address to check"
)
{
/* some code to load */
}else{
document.write('<div>testing my super loaded div code sample</div>')
}
}
  • Your indentation and use of whitespace is completely broken, fix it.
  • I’ve never seen a single if which was split over three lines, fix it.
  • You should not use == unless you know what it is doing. == performs casting as necessary to compare two values, while === compares their type and value.
  • I’m not a fan of creating HTML-elements in a string (document.createElement()), but for sure the opinions differ on this one vividly.

urlCheck() /* autoLoadFunction */

I suggest you either write your code directly and don’t wrap it in a function (because that does nothing if you’re going to directly run it after declaring) like this:

<script type="text/javascript">
    if(window.location.href === "address to check") {
        // some code to load
    } else {
        document.write('<div>testing my super loaded div code sample</div>')
    }
</script>

Or run your code when the document is ready, by putting it at the end of the page (or use a framework which supports something like $(document).ready()):

<script type="text/javascript">
    urlCheck();
</script>

//-->

As I already said, that’s a relic, stop doing it.

I use:

if(window.location.pathname === '/about'){
  //this is JavaScript for the about page
}

All above answers works, but we can also use Regular expressions

if (/StringtoCheck/.test(window.location.href))
{
 //yes it contains
}

Regex might help when conditions are a little bit tricky. Source: How to check if url contains a sub-string using jQuery or javascript?

OR you can simply use

if(window.location.href.indexOf("YourStringToCheck") != -1){
   //string found code here
}

Leave a Reply

Your email address will not be published. Required fields are marked *