Slogan
Home > HTML

A 标签隐藏链接的参数

A 标签默认直接打开 href 链接,如果链接带参数则直接将参数写上,但是,有的时候不希望被人看到我们提交的参数,一种简单方法可以实现:

将 A 标签绑定一个事件,创建临时的 form 表单,在 form 表单里将参数提交给 A 标签的链接,并设置提交形式为post。

但是此方法,对于页面会对 post 请求做拦截的可能会失效。比如代码里的百度首页就不会接收 post,具体使用时将链接换成别的


具体代码如下:


<!DOCTYPE html>
<html>

<head>
    <title>a标签隐藏参数</title>
    <meta charset="utf-8">
</head>

<body>
    <p><a name="jump-to" href="https://www.baidu.com/">点击跳转</a></p>
    <script type="text/javascript">
        document.getElementsByName("jump-to")[0].onclick = function (x) {
            jumpLink("https://www.baidu.com/s", {
                "ie": "utf-8",
                "wd": "uinote.com",
            }, "_target");
            x.preventDefault();
            x.stopPropagation();
        };

        function jumpLink(action, params, target) {
            var fm = document.createElement("form");
            var params = params || {};
            fm.action = action;
            fm.method = "post";
            fm.target = target || "";
            fm.style.display = "none";
            for (var x in params) {
                var opt = document.createElement("input");
                opt.name = x;
                opt.value = params[x];
                fm.appendChild(opt);
            }
            document.body.appendChild(fm);
            fm.submit();
            document.body.removeChild(fm); // remove form after submit
        }
    </script>
</body>

</html>


上一篇:HTML <select> 标签的 multiple 属性