Advanced Search

View RSS Feed

molendijk

Things we can do with location.search

Rate this Entry
The javascript location.search propery sets / returns the query portion of a URL, including the question mark (?). This means that if we put <a onclick="location.search='this is a test'">test</a> in a file named our_file.html, the URL (our_file.html) will be replaced with our_file.html?this is a test after a click on the link. Having arrived at our_file.html?this is a test, we can go back to our_file.html by using the browser's history (back) button. The content of our_file.html?this is a test will be identical to the content of our_file.html, unless we do something about it. And we should, because having two identical pages on a site is not a very useful thing.

We can use the search portion of a URL containing a question mark - where the search portion is the string to the right of '?' - to pass data from one page (our_file.html) to another (our_file.html?this is a test). Here's a script that we could use for that purpose. It must be put immediately before the closing body tag of the page (here: our_file.html)
<script>
var data=location.search;
if(data)
{
data = location.search.substring(1); // needed to remove the '?'
//do something with the data
data=''
}
</script>

In the above script, we can replace //do something with the data with some concrete javascript line using the variable data, like document.write(data) - or, if we want the data to be readable: document.write(unescape(data)). The result we be that a text string (this is a test) is passed from our_file.html to our_file.html?this is a test when we click on our link in our_file.html (where the link is provided by <a onclick="location.search='this is a test'">test</a>, see above).

A more interesting example of passing data from one page to another using the search portion of a URL is the following, which assumes that (i) we have an iframe in our_file.html: <iframe name="ifr" style="position: absolute; width: 300px; height: 300px; background: white" src="some_page.html"></iframe> and that (ii) //do something with the data in the script above is replaced with ifr.location.replace(data). If we now replace our original link in our_file.html with <a onclick="location.search='some_other_page.html'">some other page</a>, a click on the new link will take us to a new page our_file.html?some_other_page.html which is identical to our_file.html except for the content of the iframe, which loads some_other_page.html (in our_file.html?some_other_page.html). Of course, in order for this to work, we must create two pages some_page.html and some_other_page.html first.

This demonstrates that location.search can be used to (i) preserve the content of a given page (here: our_file.html) and, at the same time, to (ii) change the content of an iframe contained in it while going from one page to another page (here: our_file.html?some_other_page.html). So a navigation menu in the 'main page' (here: our_file.html) will be visible on all pages of a site constructed along the lines given here.
IMPORTANT: <a onclick="location.search='some_other_page.html'">some other page</a> was used above in a non-iframed page to go from some_page.html (in an iframe) to some_other_page.html (in an iframe). If we want to change the iframe's content from within the iframe, we should do <a onclick="parent.location.search='some_other_page.html'">some other page</a>.

Demo and explanations here. The demo contains features that have nothing to do with location.search, because I already used the files of the demo for another purpose. But I think it explains rather what I want to show.

Arie.

Submit "Things we can do with location.search" to del.icio.us Submit "Things we can do with location.search" to StumbleUpon Submit "Things we can do with location.search" to Google Submit "Things we can do with location.search" to Digg

Updated 01-01-2013 at 09:49 PM by molendijk

Tags: None Add / Edit Tags
Categories
JavaScript & Ajax

Comments

  1. ajfmrf's Avatar
    I am trying to grasp what you are saying Arie.

    How would that script be used -to search a web page? a site? another page?
  2. molendijk's Avatar
    Hi Bud,
    You can do with it what's explained in the demo. If I remember well, you asked a question (a couple of weeks ago) about how to load pages in an iframe. I proposed a script that did what you wanted and that was 'boomark-friendly' at the same time. With this new script, you can do the same thing and lots of other things. Here's a simple example:
    Code:
    <!doctype html>
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    
    <title></title>
    
    <style>
    body {font-family: verdana; font-size: 12px; background: #dedede}
    </style>
    
    </head>
    
    <body>
    
    <div style="position: relative; text-align: center">
    <a href="javascript: void(0)" onclick="location.search='http://www.dynamicdrive.com'">DynamicDrive</a>
    <a href="javascript: void(0)" onclick="location.search='http://www.webkit.org'">Webkit</a>
    <a href="javascript: void(0)" onclick="location.search='http://edition.cnn.com/'">CNN</a>
    
    
    </div>
    
    <iframe name="ifr" style="position:absolute; left:10%; top: 10%; width:80%; height: 80%; background: white" src="http://www.dynamicdrive.com"></iframe>
    
    
    <script>
    var data=location.search;
    if(data) 
    {
    data = location.search.substring(1); // needed to remove the '?'
    ifr.location.replace(data)
    data=''
    }
    </script>
    
    </body>
    
    </html>
    But, as I said, they are other possibilities offered by the script.
    Arie.
  3. ajfmrf's Avatar
    Thanks Arie,I hope I can learn more about this location.search