调用Javascript函数的Href链接将打开一个新选项卡，并且不会'；我不能在Firefox中工作

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

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

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

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

 ReferenceError: functionToPostParameters is not defined

href value/js函数中是否存在使Firefox以这种方式运行的错误

---

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

尝试将

href

属性设置为

href=“javascript:void（0）；”

（这将禁用链接的默认操作）并设置

onclick

事件处理程序：

---

问题在于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();

函数clearEvents（节点）{
node.onclick=function（）{return false；}
node.onmousedown=函数（）{return false；}
node.onmouseup=function（）{return false；}
node.onmousemove=function（）{return false；}
返回节点；
}
函数函数拓扑参数（路径、参数）{
var form=document.createElement（“表单”）；
form.setAttribute（“方法”、“帖子”）；
form.setAttribute（“target”，“_blank”）；
form.setAttribute（“动作”，路径）；
for（参数中的变量键）{
var hiddenField=document.createElement（“输入”）；
setAttribute（“类型”、“隐藏”）；
setAttribute（“名称”，键）；
setAttribute（“值”，参数[key]）；
表格.appendChild（hiddenField）；
}
文件.正文.附件（表格）；
表单提交（）；
文件.body.removeChild（表格）；
返回false；
}
函数processPostLinks（）{
var nodes=document.getElementsByClassName（'postLink'）；
对于（var i=0；i

基本上-脚本遍历所有.postLink元素，然后禁用默认的a标记行为，并在鼠标单击时将带有数据路径和数据参数属性的FunctionToposParameters设置为函数参数

解决方案2-与第一个相同，但尽量不要使用：href（例如，将.postLink css类、数据路径和数据参数属性赋予样式化div）-在这种情况下，函数clearEvents是完全可选的

---

解决方案3-使用formData和ajax发送请求。

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

我想在帖子完成后，在一个新的标签页中打开它

问题在于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>

---

希望对其他人有所帮助。

可能FF正在新选项卡的上下文中执行js，而该函数不存在……如果您从

标记中取出

target=“\u blank”

会发生什么？我将target=“\u blank”放入，因为我需要在新选项卡中打开form.submit。是的，但您在javascript中将目标也设置为空白。可能Firefox在尝试运行javascript之前首先打开了新标签（按照

标签的指示），而chrome则相反。@Starcream1984，如果我删除target=\u blank，则什么都不会发生，单击链接时什么也不会发生。它会打开一个新的空标签，什么也不会发生。请考虑它应该张贴我的形式提交在新的选项卡上面解释。

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