如何使用url中的＃运行javascript函数？

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

Answer 1

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>

Answer 2

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