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

Question

您好，这一切都是在我运行一个改变 iframe 的 innerHTML 的函数（我们称之为 loadround）时开始的。现在一旦加载了加载框架，iframe 中的链接一旦点击就会改变 iframe 页面。唯一的问题是当我单击后退按钮时，loadround 页面消失了。我已经想了很多次，但无济于事。所以我尝试了这段代码。

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

然后

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;
 }

（h2中的括号是故意的） 然后我会尝试通过可能的 onload 函数重新加载该函数，但现在我正在使用一个简单的 href 进行测试，如下所示。

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

不幸的是，检查代码不起作用，我几乎可以肯定有一种更简单的方法可以做到这一点。我尝试更改 iframe 的 src 而不是 innerhtml 并且存在同样的问题。在此先感谢

Answer 1

现代浏览器开始支持window.onhashchange事件

与此同时，您可以使用 Lekensteyn 提出的解决方法，或者您可以在这里找到有用的东西：JavaScript/jQuery - onhashchange event workaround

Answer 2

你误解了函数void，它只是确保返回值是未定义的。这可以防止浏览器在您将其放入链接时导航离开。您可以通过在浏览器中粘贴下一个地址来自行测试：

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

强烈建议不要将哈希部分作为 Javascript 执行，因为未经适当验证它很容易受到 XSS 攻击。您应该注意哈希部分，并在修改时做一些事情。

一个例子；每 50 毫秒观察一次散列部分的修改，并在 ID 为 targetElement 的元素中插入一个带有散列部分的标题。如果哈希部分无效，请将当前条目替换为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 代码：

<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>