当html链接中的锚标记(#)被访问或重新加载时调用javascript函数

Question

我有一个创建html页面的函数

function createVisuUsuario() {
var content = document.createElement("div");
content.className = "content";
content.id = "content-add";
content.innerHTML = '<h1>Visualizar Usuário</h1>'+
'<form>'+
'<br>'+
'<div id="res-visu"></div>'+
'</form>';
document.body.appendChild(content);
}

另一个调用上述函数的函数，它使用ajax连接到php并从数据库中获取信息

function visuUser() { 
limpaTela(); 
createVisuUsuario(); 

var res_visu = $("#res-visu"); 
$.ajax ({
url: "php/cadastro.php",
type: "POST",
data: {"chave":"visu-teste"},
success: function(res) {
var str = res.substring(1,0);
res = res.substring(1);
if(str == 0) {
res_visu.html(res);
res_visu.css("text-align","center");

tabelaFiltro();
}
else if(str == 1) {
res_visu.html(res);
res_visu.css("color","red");
}
},
error: function() {
console.log("erro");
}
});
});

我有一个按钮，调用这个函数时，点击它，并在HTML链接上放一个锚标签:按钮:

<a id="visu-user" class="menu-link">Visualizar Usuário</a>

链接

localhost/teste.php#visu-user

是否有可能当我访问这个链接"localhost/test .php# visual -user"或者重载它，它调用我的函数visuUser()并创建页面等等

Answer 1

你可以首先创建一个onload函数，它做Abbas所说的:

function check_hash() {
if(location.hash == '#visu-user') visuUser();
}
$(check_hash);

您可能希望将相同的函数绑定到hashchanged事件:

$(window).bind('hashchange', check_hash);

也许您也想以这种方式加载其他页面。实际上，您可以简单地将按钮更改为:

<a href="#visu-user" class="menu-link">Visualizar Usuário</a>

那么你就不需要按钮的处理程序了:hashchanged事件会为你做这件事!

Answer 2

您可以使用js获取哈希值，并检查它是否对应于正确的字符串，如下所示:

if(location.hash == '#visu-user'){
visuUser();
}