访问或重新加载 html 链接中的锚标记（#）时调用 javascript function

Question

我有一个创建 html 页面的 function

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

另一个 function 调用上面的 function 并使用 ajax 连接到 ZE1BFD4Z062321E4ACEE36C 数据库并带来信息

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 链接上放置一个锚标记时，该按钮调用此 function： 按钮：

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

关联

localhost/teste.php#visu-user

当我访问此链接“localhost/teste.php#visu-user”或重新加载它时，是否有可能调用我的 function visuUser() 并创建页面等。

Answer 1

您可以先进行加载 function，这就是阿巴斯所说的：

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

您可能希望将相同的 function 绑定到 hashchanged 事件：

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

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

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

那么您的按钮就不需要处理程序了：hashchanged 事件将为您完成！

Answer 2

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

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