Question

我正在创建一个在href属性中调用javascript函数的链接：

我的功能是：

 <a class="product-link" target="_blank" href='javascript:functionToPostParameters("path", "parameters");'><span class="product-name">My Product Link</span></a>

当我在Chrome中使用此链接时，它会调用该函数，提交带有参数的表单并打开一个新标签。

在Firefox中，它打开一个新选项卡然后调用该函数，因为新选项卡不包含该函数，此错误显示在新选项卡的控制台中：

function functionToPostParameters(path, params) {
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("target", "_blank");
form.setAttribute("action", path);

for (var key in params) {
    if (params.hasOwnProperty(key)) {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", key);
        hiddenField.setAttribute("value", params[key]);
        form.appendChild(hiddenField);
    }
}

    form.submit();
    return false;
};

href值/ js函数中是否存在错误，导致Firefox以这种方式运行？

欢迎采用任何方法，使用href作为链接。

Answer 1

好的，我找到了问题的原因。

我希望在帖子完成后，它会在新标签页中打开。

问题在于Firefox需要两件事：

1. Form needs a submit button.
2. Form needs to be appended to body in order to make submit works.

我的功能的新代码：

function functionToPostParameters(path, params) {

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("target", "_blank");
form.setAttribute("action", path);

for (var key in params) {
    if (params.hasOwnProperty(key)) {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", key);
        hiddenField.setAttribute("value", params[key]);
        form.appendChild(hiddenField);
    }
}

var submitButton = document.createElement("input");// NEW  
submitButton.setAttribute("type", "submit");// NEW  
submitButton.setAttribute("value", "Click");// NEW  
form.appendChild(submitButton);// NEW  
document.body.appendChild(form); // NEW  

form.submit();
};

链接html：

 <a class="product-link" target="_self" href="javascript:void(0);" onclick="javascript:functionToPostParameters('path', 'parameters');"><span class="product-name"> My product Link </span> </a>

希望对其他人有帮助。

Answer 2

尝试将href属性设置为href="javascript:void(0);"（这将禁用链接的默认操作）并设置onclick事件处理程序：

<a class="product-link" target="_blank" href="javascript:void(0);" onclick="javascript:functionToPostParameters('path', 'parameters');"><span class="product-name">My Product Link</span></a>

Answer 3

问题是你的a：href仍然有效 - 你通过链接打开新标签，而不是因为表单重定向。

解决方法1：

<a class="product-link postLink" data-path="about:blank" data-params='{"x":1}' href='#'><span class="product-name">My Product Link</span></a>

和JS

function clearEvents(node) {
    node.onclick = function() { return false; }
    node.onmousedown = function() { return false; }
    node.onmouseup = function() { return false; }
    node.onmousemove = function() { return false; }
    return node;
}

function functionToPostParameters(path, params) {
    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("target", "_blank");
    form.setAttribute("action", path);

    for (var key in params) {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", key);
        hiddenField.setAttribute("value", params[key]);
        form.appendChild(hiddenField);
    }

    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);

    return false;
}

function processPostLinks() {
    var nodes = document.getElementsByClassName('postLink');

    for ( var i = 0; i < nodes.length; i++ ) {
        var node = nodes[i];
        clearEvents(node).onclick = function() {
            functionToPostParameters(node.getAttribute('data-path'),JSON.parse(node.getAttribute('data-params')));
            return false;
        }
    }
}
processPostLinks();

基本上 - 脚本遍历所有.postLink元素，而不是禁用默认的a-tag行为，并将带有data-path和data-params属性的functionToPostParameters设置为鼠标单击时的函数参数。

解决方法2 - 与第一个相同，但尽量不使用：href（例如，将.postLink css-class，data-path和data-params属性赋予样式div） - 在这种情况下，函数clearEvents是完全可选的

解决方法3 - 使用formData https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects和ajax发送您的请求。

调用Javascript函数的Href链接会打开一个新选项卡，但在Firefox中不起作用

3 个答案: