调用 Javascript 函数的 Href link 打开一个新选项卡并且在 Firefox 中不起作用

Question

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

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

我的函数是这样的：

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

当我在 Chrome 中使用此 link 时，它会调用该函数，提交带有参数的表单，然后会打开一个新选项卡。

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

 ReferenceError: functionToPostParameters is not defined

href 值/js 函数是否有错误导致 Firefox 出现这种情况？

欢迎任何方法，使用 href 作为 link。

Answer 1

尝试将 href 属性设置为 href="javascript:void(0);"（这将禁用 link 的默认操作）并设置 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 2

问题是您的 a:href 仍然有效 - 您通过 link 打开新标签页，而不是因为表单重定向。

解决方法 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 行为，并设置具有数据路径和数据参数属性的 functionToPostParameters 作为鼠标单击时的函数参数。

解决方法 2 - 与第一个相同，但尽量不要使用 a: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 发送您的请求。

Answer 3

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

我希望 post 完成后，它会在新选项卡中打开。

问题是 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();
};

Link 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>

希望对其他人有所帮助。

调用 Javascript 函数的 Href link 打开一个新选项卡并且在 Firefox 中不起作用

Href link that calls Javascript function opens a new tab and doesn't work in Firefox

html

javascript

firefox

jquery

href