javascript - 在 Firefox 中从多个 Iframe 提交表单

Question

我有一个包含多个 iframe 的页面。所有 iframe 都引用同一页面。每个 iframe 页面都包含一个我想要提交到服务器的表单。包含 iframe 的页面上有一个“提交全部”按钮，单击该按钮会调用此函数:

    function submitAll() {
    var fs = d3.selectAll('iframe')[0];
    for (var i = 0; i < fs.length; i++) {
        try {
            var el = fs[i];
            var doc = el.contentDocument;
            var root = el.contentWindow['root'];
            var f = doc.getElementById('submit-form');
            removeParentNodeReference(root);
            doc.getElementById('POST-name').value = document.getElementById('name').value;
            doc.getElementById('POST-email').value = document.getElementById('email').value;
            doc.getElementById('POST-phone').value = document.getElementById('phone-number').value;
            doc.getElementById('POST-json').value = JSON.stringify(root);
            doc.getElementById('POST-submit-info').click();
        }
        catch (e) {
            console.log(e.message);
        }
    }

该函数从每个 iframe 中获取内容文档。对于 iframe 的文档，它将继续为 iframe 页面中的表单填写一些表单值。然后该函数将抓取表单的按钮并单击它。这会调用 iframe 中执行一些处理并提交表单的函数。

在 Chrome 中，所有 iframe 的表单都会提交。然而，在 Firefox 中，表单提交只会发生在第一个表单上。我进入调试器并看到，尽管它循环遍历所有 iframe 页面，但实际上只发生了一次提交。

大家有什么想法吗？

谢谢。

Answer 1

除了使用 iframe，您还可以使用 Ajax ，这将不需要设置多个 iframe。 Ajax 允许您向页面发出请求，以便获取其内容或提交数据。

示例

在此示例中，我将使用 jQuery，它的语法比纯 JavaScript 更简单。确保在您的页面中包含 jQuery，这样才能正常工作。

由于我不知道您定义提交数量的方式，我假设您将其作为以下函数的参数:

function submitAll(n){
    /* Get the values from your form
       --> they need to have the same name as in
       your php code (e.g "POST-name", etc) */
    var values = $("#myForm").serialize();

    /* Submit them n times */
    for(var i = 1; i <= n; i++){
        $.ajax({
            url: "yourpage.php",
            type: "post", // or get
            data: values, // declared above
            success: function(){
                console.log("Request "+i+"/"+n+" sent successfully.");
            },
            error: function(){
                console.log("Request "+i+"/"+n+" failed.");
            }
        });
    }
}

很高兴知道

Ajax 是异步的，这意味着在 ajax 请求等待服务器响应时，位于其之后的 JavaScript 代码会继续执行。例如，如果您将此行放在函数末尾:

console.log("End of submitAll");

它可能会在您收到 n 个响应中的任何一个之前执行。

我希望这会有所帮助，如果您尝试此操作并遇到问题，请告诉我们。