How to Execute Javascript Code Using Variable in URL

I'm really new to Javascript and I'm hav开发者_运维百科ing some trouble understanding how to get the following to work. My goal is to have a certain Javascript action execute when a page loads and a variable added to the end of the URL would trigger which Javascript action to execute. The URL of the page that I'm looking to implement this on is http://www.morgantoolandsupply.com/catalog.php. Each of the "+expand" buttons, which are Javascript driven, drop-down a certain area of the page. Ultimately, I would like to be able to create a URL that would automatically drop-down a certain category when the page loads. Could anybody explain to me the process to do this? Thanks in advance for any help!

---

You have to parse the URL somewhat "manually" since the parameters in the url aren't automatically passed to javascript, like they are in server-side scripting (via $_GET in PHP, for instance)

One way is to the use the URL fragment identifier, i.e. the "#something" bit that can go at the end. This is probably the neatest way of doing it, since the fragment isn't sent to the server, so it won't be confused with any other parameters

// window.location.hash is the fragment i.e. "#foo" in "example.com/page?blah=blah#foo"
if( window.location.hash ) {
    // do something with the value of window.location.hash. First, to get rid of the "#"
    // at the beginning, do this;
    var value = window.location.hash.replace(/^#/,'');
    // then, if for example value is "1", you can call
    toggle2('toggle' + value , 'displayText' + value);
}

The URL "http://www.morgantoolandsupply.com/catalog.php#1" would thus automatically expand the "toggle1" element.

Alternatively, you can use a normal GET parameter (i.e. "?foo=bar")

var parameter = window.location.search.match(/\bexpand=([^&]+)/i);
if( parameter && parameter[1]) {
    // do something with parameter[1], which is the value of the "expand" parameter
    // I.e. if parameter[1] is "1", you could call
    toggle2('toggle' + parameter[1] , 'displayText' + parameter[1]);
}

window.location.search contains the parameters, i.e. everything from the question mark to the end or to the URL fragment. If given the URL "example.com/page.php?expand=foo", the parameter[1] would equal "foo". So the URL "http://www.morgantoolandsupply.com/catalog.php?expand=1" would expand the "toggle1" element.

I'd perhaps go for something more descriptive than just a number in the URL, like, say use the title of the dropdown instead (so "#abrasives" or "expand=abrasives" instead of "#1" or "expand=1"), but that would require a little tweaking of your existing page, so leave that for later

---

You've already got the function to call: toggle2(), which takes two parameters that happen to be identical for all categories except for a number at the end. So create a URL that includes that number: http://www.morgantoolandsupply.com/catalog.php#cat=4

Then find that number in location.hash using a regular expression. This one is robust enough to handle multiple url parameters, should you decide to use them in the future: /[\#&]cat=(\d+)/. But, if you expect to never add anything else to the url, you could use a very simple one like /(\d+)/.

Once you've got the number, it's a simple matter of using that number to create your two parameters and calling toggle2().

This should work:

window.onload = function() {
    if (/[\#&]cat=(\d+)/.test(location.hash)) {
        var cat = parseInt(RegExp.$1);
        if (cat > 0 && cat < 13) {
            toggle2("toggle"+cat, "displayText"+cat);
        }
    }
}

---

Not a complete answer ("Give a man a fish" and all that), but you can start with something along these lines:

// entire URL
var fullURL = window.location.href;

// search string (from "?" onwards in, e.g., "www.test.com?something=123")
var queryString = window.location.search;

if (queryString.indexOf("someParameter") != -1) {
  // do something
}

More info on window.location is available from the Mozilla Developer Network.

Having said that, given that you're talking about a PHP page why don't you use some server-side PHP to achieve the same result?