調用Javascript函數的Href鏈接會打開一個新選項卡，但在Firefox中不起作用

Question

我正在創建一個在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中使用此鏈接時，它會調用該函數，提交帶有參數的表單並打開一個新選項卡。

在Firefox中，它打開一個新選項卡，然后調用該函數，因為新選項卡不包含該函數，此錯誤顯示在新選項卡的控制台中：

 ReferenceError: functionToPostParameters is not defined

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發送您的請求。