CODEWITHSUNDEEP
javascriptfirefox
Nandini Bhaduri
Nandini Bhaduri

Reputation: 1855

Firefox Latest Update - Javascript Issue

I am using a third party software which uses the Prototype library. It was working fine before the latest update (Ver 68 and above) of Firefox. It is still working in the other browsers. I tried debugging and whenever I introduce a breakpoint and go step by step the code works. I found the following line of code which if I step over and let the code run the problem is solved. But if I let the code run before this the problem occurs.

return formView.submit();

Any idea? I am ok with a hack even.

Update:

I created a MRE as suggested. Here is the link https://brandsoftinfotech.com/test/firefox-frame-submit/

I have created 2 forms, one in the parent page and one in the frame. On submitting the parent page form the frame page form gets submitted and writes the data in a log file. And the form page when submitted just shows the data from that log file.

index.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>

frame-box.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>

This works fine on Chrome, MS Edge but doesn't work on Firefox.

I am not sure if solving this would solve my problem, but at least this should work for my library code to work.

Upvotes: 0

Views: 71

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074505

I'm mildly surprised to see that it works on any browser. By allowing the parent's form submission to occur, you're tearing down the page, which means tearing down the iframe, and any requests that may be underway can be aborted (or if not quite started, never started).

I'd probably switch to ajax rather than doing the actual form submission.

But if you want to do the form submission, to do this reliably you'll have to wait for the frame's submission to complete before doing the parent submission. The easy way to do that is to have the frame submission respond with a small page with JavaScript on it that tells the parent it's finish:

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

Then the parent page is something like:

<!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>

But you may get away with just detecting the change in location in the iframe. That would involve just changing the parent page as indicated:

<!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>

I wouldn't expect that to work if the form in the frame does a significant upload (though I could be wrong about that).

Upvotes: 1

Related Questions