在 Firefox 中从多个 iframe 提交表单答案

【问题标题】：Submitting forms from Multiple Iframes in Firefox在 Firefox 中从多个 iframe 提交表单
【发布时间】：2014-08-17 18:56:54
【问题描述】：

我有一个包含多个 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 页面，实际上只发生了一次提交。

有人有什么想法吗？

谢谢。

【问题讨论】：

您是否要向网站发送垃圾邮件？
@blex 一点也不。 iframe 中的页面位于我的网络服务器上。我不确定这是否是用例的最佳实现（使用一个或多个 iframe）。我有一个使用 d3 创建树的页面。用户可能会或可能不会创建这些树中的几个。如果他们这样做了，他们每次都会创建一个新的 iframe（以及一个与之配套的选项卡）。如果他们创建了几棵树，我想将他们制作的每棵树提交到服务器以存储在数据库中以供以后处理。
哦，好吧，我没有注意到 d3 用于插入。好吧，我不知道 d3 是如何工作的，但是不要使用多个 iframe，您应该查看 Ajax（您可以发布任意数量的表单，无需离开页面，也无需任何 iframe）-> Take a look here ： )

标签： javascript html forms iframe

【解决方案1】：

您可以使用Ajax，而不是使用 iframe，这样就不需要设置多个 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 是异步的，这意味着位于它之后的 javascript 代码在 ajax 请求等待来自您的服务器的响应时继续执行。例如，如果您将此行放在函数的末尾：

console.log("End of submitAll");

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

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

【讨论】：

虽然我确实接受了这个建议，但我仍然很好奇为什么选择所有框架并手动提交每个框架的文档表单在 Firefox 中不起作用，以及是否有通用的解决方法。跨度>
@Quy 感谢您接受此答案。虽然我不确定您为什么会遇到这个问题，但我认为您最好避免使用多个 iframe。它们通常被认为是不好的做法，应该在特定情况下使用，或者如果没有其他可用选项。不过，我希望有一天，你能找到这个神秘错误的答案！
同意@blex 更容易将每个 iframe 视为一个独立的组件。它也使维护您的应用程序变得更加容易。

【解决方案2】：

我遇到了同样的问题。我通过向 iframe (notsendiframe) 添加一个类来解决它。 if($(".notsendiframe").length) { // 重命名 iframe 的类 // 发送第一个 iframe $(".notsendiframe")[0] } 在 iframe 的发布页面中，我添加了一个 JS，它再次从父级启动 JS。（因此将发送下一个 iframe）也许您需要先显示 iframe，然后再提交。

【讨论】：