时间戳

首页 > 解决方案 > Firefox 最新更新 - Javascript 问题

javascript - Firefox 最新更新 - Javascript 问题

问题描述

我正在使用使用原型库的第三方软件。在 Firefox 的最新更新（版本 68 及更高版本）之前，它运行良好。它仍在其他浏览器中工作。我尝试调试，每当我引入断点并逐步进行代码工作时。我找到了以下代码行，如果我跳过并让代码运行，问题就解决了。但是如果我让代码在此之前运行，就会出现问题。

return formView.submit();

任何想法？我什至可以接受黑客攻击。

更新：

我按照建议创建了一个 MRE。这是链接https://brandsoftinfotech.com/test/firefox-frame-submit/

我创建了 2 个表单，一个在父页面中，一个在框架中。在提交父页面表单时，框架页面表单被提交并将数据写入日志文件。提交时的表单页面仅显示该日志文件中的数据。

索引.html

<!DOCTYPE html>
<html>
<head>
    <script>
        function submitFunction() {
            var myFrame = document.getElementById("myFrame");
            var myForm = myFrame.contentWindow.document.getElementById("myForm");
            myForm.submit();
        }
    </script>
</head>
<body>
    <form action="index-submit.php" onSubmit="submitFunction()">
        <input type="submit" value="Submit">
    </form>

    <iframe id="myFrame" src="frame-box.html"></iframe>
</body>
</html>

框架框.html

<form action="frame-submit.php" id="myForm">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
</form>

这在 Chrome、MS Edge 上运行良好，但在 Firefox 上不起作用。

我不确定解决这个问题是否能解决我的问题，但至少这应该适用于我的库代码。

标签： javascriptfirefox

解决方案

看到它适用于任何浏览器，我感到有点惊讶。通过允许父表单提交发生，您正在拆除页面，这意味着拆除 iframe，并且任何可能正在进行的请求都可以中止（或者如果没有完全启动，则永远不会启动）。

我可能会切换到 ajax 而不是进行实际的表单提交。

但是，如果您想进行表单提交，要可靠地执行此操作，您必须等待框架的提交完成，然后再进行父提交。最简单的方法是让框架提交响应一个带有 JavaScript 的小页面，告诉父级它已经完成：

<!DOCTYPE html>
<html>
<body>
<script>
if (parent && parent.formCallback) {
    parent.formCallback();
}
</script>
</body>
</html>

然后父页面是这样的：

<!DOCTYPE html>
<html>
<head>
    <script>
        function submitFunction() {
            var myFrame = document.getElementById("myFrame");
            var myForm = myFrame.contentWindow.document.getElementById("myForm");
            myForm.submit();
            return false; // <−−−−−−−− cancel submission
        }
        function formCallback() {                            // 
            document.getElementById("parentForm").submit();  // <−−−−−−−− Submit on callback
        }                                                    // 
    </script>
</head>
<body>
    <!--  vvvvvvvvvvvvvvv−−−−−−−− Added ID    -->
    <form id="parentForm" action="/index-submit" onSubmit="return submitFunction()">
        <input type="hidden" name="index-field" value="x">
        <input type="submit" value="Submit">
    </form>

    <iframe id="myFrame" src="frame-box.html"></iframe>
</body>
</html>

但是您可能只需检测 iframe 中位置的变化就可以逃脱。这将只涉及更改父页面，如下所示：

<!DOCTYPE html>
<html>
<head>
    <script>
        function submitFunction(form) { // <−−−−−−−− Added parameter
            var myFrame = document.getElementById("myFrame");
            var myForm = myFrame.contentWindow.document.getElementById("myForm");
            myForm.submit();
            // Wait for the location of the iframe window to change
            setInterval(function() {
                if (String(myFrame.contentWindow.location).includes("frame-submit")) {
                    // Frame's form submitted, we can submit ours
                    form.submit();
                }
            }, 100);
            return false; // <−−−−−−−− cancel submission
        }
    </script>
</head>
<body>
    <form action="/index-submit" onSubmit="return submitFunction(this)">
    <!--                                                         ^^^^−−−−−−−−− added argument    -->
        <input type="hidden" name="index-field" value="x">
        <input type="submit" value="Submit">
    </form>

    <iframe id="myFrame" src="frame-box.html"></iframe>
</body>
</html>

如果框架中的表单进行了重要的上传，我不会期望它会起作用（尽管我可能错了）。

推荐阅读