Tengo un <form action='/a/url' method='POST' onSubmit='setInterval(update_progress, 1000)' .

El POST desencadena una operación de ~40 segundos, por lo que update_progress actualiza una barra de progreso HTML con el tiempo restante estimado , para mantenerlo simple.

Cuando visito el sitio en producción, la barra de progreso funciona bien en:

• el Firefox de mi portátil (Linux)
• Chrome de mi portátil (Mac)
• Edge de mi portátil (Windows)

Pero no se incrementará en:

• el Firefox de mi teléfono (iPhone)
• Safari de mi teléfono (iPhone)
• El Safari de mi portátil (Mac)

He observado el mismo error al actualizar con un código más simple, como este:

 var update_progress = function(){ console.log("here"); document.getElementById("info").insertAdjacentHTML("afterend", "<h3>foo</h3>"); }

En todos los navegadores, el formulario se envía y el usuario finalmente pasa a la página siguiente.

¿Algunos navegadores no permiten actualizar elementos después de enviar el formulario?

*** ACTUALIZACIÓN: Código para reproducir ***

 <!--- templates/form.html ---> <script type="text/javascript"> var update_progress = function(){ var new_html = "<p>...</p>"; document.getElementById("progress").insertAdjacentHTML("afterend", new_html); }; </script> <form action="/long_request" method="POST" onsubmit="setInterval(update_progress, 1000)"> <button type="submit">submit</button> </form> <div id="progress"></div>

 # ==> app.py <== import time from flask import Flask, render_template app = Flask(__name__) @app.route("/long_request", methods=["POST"]) def long_request(): time.sleep(5) # 5 seconds return "im done" @app.route("/form", methods=["GET"]) def page_form(): return render_template("form.html")