How to run a javascript function using the # in the url?

Question

hi this all started when i ran a function (lets call it loadround) that altered the innerHTML of an iframe. now once loadframe was loaded there were links in the iframe that once clicked would change the iframe page. the only problem is when i click the back button the loadround page was gone. i've thought about this numerous times to no avail. so i tried this code.

<a href="javascript:void(loadround('parameter1','parameter2'))">loadround</a>

then

function loadround(a,b){
window.location.hash = "#loadround('"+a+"','"+b+"')";

var code = "<(h2)>"+a+"</(h2)><(h2)>"+b+"</(h2)>"
   var iFrame =  document.getElementById('iframe');
   var iFrameBody;
   iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0]
  iFrameBody.innerHTML = code;
 }

(the brackets in the h2 are intentional) then i would try to reload the function by possibly an onload function but for now i was testing with a simple href as followed.

function check(){
var func = location.hash.replace(/#/, '')
void(func);
}
<a href="javascript:check()">check</a>

unfortunately the check code doesn't work and im almost certain there is an easier way of doing this. i tried changing the src of the iframe instead of the innerhtml and there was the same problem. thanks in advance

wow yep the line breaks didn't come out right hopefully thats legible — cadell christo, Feb 21 '11 at 13:33

Lekensteyn · Answer 1 · 2011-02-22T15:17:33.200

You are misunderstanding the function void, which just make sure the return value is undefined. That prevents the browser from navigating away when you put it in a link. You can test that yourself by pasting the next addresses in your browser:

javascript:1        // note: return value 1, browser will print "1" on screen
javascript:void(1)  // note: undefined return value, browser won't navigate away

It's strongly discouraged to execute the hash part as Javascript, as it's vulnerable to XSS without proper validating it. You should watch the hash part, and on modification, do something.

An example; watch every 50 milliseconds for modifications in the hash part, and insert in a element with ID targetElement an heading with the hash part. If the hash part is not valid, replace the current entry with home.

var oldHash = '';
function watchHash(){
    // strip the first character (#) from location.hash
    var newHash = location.hash.substr(1);
    if (oldHash != newHash) {
        // assume that the parameter are alphanumeric characters or digits
        var validated = newHash.match(/^(\w+)$/);
        // make sure the hash is valid
        if (validated) {
            // usually, you would do a HTTP request and use the parameter
            var code = "<h1>" + validated[1] + "</h1>";
            var element = document.getElementById("targetElement");
            element.innerHTML = code;
        } else {
            // invalid hash, redirect to #home, without creating a new history entry
            location.replace("#home");
        }
        // and set the new state
        oldHash = newHash;
    }
}
// periodically (every 50 ms) watch for modification in the hash part
setInterval(watchHash, 50);

HTML code:

<a href="#home">Home</a>
<a href="#about">About Me</a>
<a href="#contact">Contact</a>
<div id="targetElement">
    <!-- HTML will be inserted here -->
</div>

okay thankyou for clearing the slate about the void now as for your code its beautiful missing an = after the var code but thats it. what does the validated[1] do? also how do i use the http request to retrieve the function from the hash can i just use the window.location.hash and remove the # or will that not work? — cadell christo, Feb 22 '11 at 12:06
`validate` is an array, which contains a match of one or more occurences of alphanumeric characters (the regular expression `/^(\w+)$/`). A single function should watch the hash, which can call other functions as well. "...to retrieve the function from hash..." - the watching function should take action. What do you want to achieve? Provide the URL if possible. — Lekensteyn, Feb 22 '11 at 15:25

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

The modern browsers are starting to support the event window.onhashchange

In the meantime you can use the workaround proposed by Lekensteyn or maybe you can find something useful here: JavaScript/jQuery - onhashchange event workaround

edited May 23 '17 at 10:33

Community

1
1

answered Feb 21 '11 at 14:28

mati

5,218
3
32
49

How to run a javascript function using the # in the url?

2 Answers2