Javascript 在Firefox中从多个iFrame提交表单

我有一个包含多个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);
        }
    }

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.");
            }
        });
    }
}

console.log("End of submitAll");

函数submitAll（）{
var fs=d3.selectAll（'iframe'）[0]；
对于（变量i=0；i

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

在chrome中，所有iframe的表单都是提交的。然而，在firefox中，表单提交只会发生在第一个表单上。我进入了调试器，发现即使它在所有iframe页面上循环，实际上也只会发生一次提交

有人有什么想法吗

---

谢谢。

您可以使用，而不需要设置多个iFrame。Ajax允许您向页面发出请求，以获取其内容或提交数据

例子 在本例中，我将使用jQuery，它的语法比纯javascript更容易实现这一点

由于我不知道您如何定义要提交的数量，因此我假设您将其作为参数提供给以下函数：

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

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.");
            }
        });
    }
}

console.log("End of submitAll");

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

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

我也遇到了同样的问题。 我通过向iframe（notsendiframe）添加一个类来解决这个问题。 如果（$（“.notsendiframe”）.length）{ //重命名iframe的类 //发送第一个iframe$（“.notsendiframe”）[0] }

---

在iframe的发布页面中，我添加了一个JS，它再次从父级启动JS。（因此将发送下一个iframe）在提交之前，您可能需要先显示iframe。

您是否试图垃圾邮件发送网站？@blex一点也不。iframe中的页面位于我的web服务器上。我不确定这是否是该用例的最佳实现（使用一个或多个iframe）或者不是。我有一个使用d3创建树的页面。用户可能创建也可能不创建其中的几棵树。如果他们创建了，他们每次都会创建一个新的iframe（以及一个选项卡）。如果他们创建了几棵树，我想将他们创建的每棵树提交给服务器，以存储在数据库中供以后处理。哦，好的，我没有注意到插件的

d3

。我不知道d3是如何工作的，但你应该看看Ajax，而不是使用几个iFrame（您可以发布任意数量的表单，无需离开页面，也无需任何iFrame）->：：虽然我同意这个建议，但我仍然很好奇为什么选择所有框架并手动提交每个框架的文档表单在firefox中不起作用，以及是否有一个通用的解决方法。@Quy感谢您接受这个答案。虽然我不确定您为什么会遇到这个问题，但我认为您最好避免使用multiplee iframe。它们通常被认为是不好的做法，应该在特定情况下使用，或者在没有其他可用选项的情况下使用。但是，我希望有一天，你会找到这个神秘错误的答案！同意@blex将每个iframe视为一个自包含的组件更容易。这也使你的应用程序更容易维护。