如何在浏览器状态栏隐藏URL路径？附PHP+HTML代码片段

我来帮你搞定这个需求！浏览器状态栏显示悬停链接的URL是原生行为，咱们可以通过JavaScript接管跳转逻辑来隐藏真实路径，下面是针对你现有代码的具体修改方案：

方法一：内联JS快速实现 #

把原链接的href替换成不会暴露真实路径的占位符，同时通过onclick事件触发跳转，这样悬停时状态栏只会显示占位符内容：

修改后的PHP代码如下：

// 先对URL参数编码，避免特殊字符报错
$targetUrl = $_SERVER['PHP_SELF'] . '?periodo=' . urlencode($path . '/' . basename($folders[$i]));

echo "<a href='#' onclick=\"window.location.href='" . htmlspecialchars($targetUrl) . "'; return false;\" >" . basename($folders[$i]) . "</a><br/>";

if(isset($item['diretorio']) && $item['diretorio'] != ''){
    echo "<tr><td>" . $item['vencimento'] . "</td><td>" . $item['baixado'] . "</td><td>...";
}

兼容性优化（兼顾无JS用户） #

如果要考虑关闭JavaScript的用户，可以搭配<noscript>标签保留原生链接：

$targetUrl = $_SERVER['PHP_SELF'] . '?periodo=' . urlencode($path . '/' . basename($folders[$i]));

echo "<a href='#' onclick=\"window.location.href='" . htmlspecialchars($targetUrl) . "'; return false;\" >" . basename($folders[$i]) . "</a>";
// 无JS时显示原生链接
echo "<noscript><a href='" . htmlspecialchars($targetUrl) . "'>" . basename($folders[$i]) . "</a></noscript><br/>";

if(isset($item['diretorio']) && $item['diretorio'] != ''){
    echo "<tr><td>" . $item['vencimento'] . "</td><td>" . $item['baixado'] . "</td><td>...";
}

方法二：分离JS的优雅写法 #

如果不想把JS写在HTML标签里，可以用事件监听的方式，代码更整洁易维护：

首先在页面底部添加一段JS：

document.addEventListener('DOMContentLoaded', function() {
    // 给需要隐藏URL的链接绑定点击事件
    const hiddenLinks = document.querySelectorAll('.hide-status-url');
    hiddenLinks.forEach(link => {
        const realUrl = link.dataset.url;
        link.addEventListener('click', function(e) {
            e.preventDefault();
            window.location.href = realUrl;
        });
    });
});

然后修改你的PHP代码，给链接添加类名和存储真实URL的data-url属性：

$targetUrl = $_SERVER['PHP_SELF'] . '?periodo=' . urlencode($path . '/' . basename($folders[$i]));

echo "<a href='#' class='hide-status-url' data-url='" . htmlspecialchars($targetUrl) . "' >" . basename($folders[$i]) . "</a><br/>";

if(isset($item['diretorio']) && $item['diretorio'] != ''){
    echo "<tr><td>" . $item['vencimento'] . "</td><td>" . $item['baixado'] . "</td><td>...";
}

补充说明 #

浏览器状态栏的URL显示是原生机制，CSS无法修改，所以必须通过JavaScript接管跳转逻辑来实现隐藏效果。上面的两种方法都能达到目的，你可以根据自己的代码风格选择。

内容的提问来源于stack exchange，提问作者marloncos