Message:

Trying to prevent closing/refreshing with beforeunload and an embedded typeform but it doesn't seem to display the warning message. Is there something I'm missing?

<html>

  <body>

    <script>

      window.addEventListener("beforeunload", function(event) {

        event.returnValue = "";

      });

    </script>

    <div class="relative pt-16 m-auto overflow-hidden" style="height: 700px">

      <iframe

        id="typeform-full"

        width="100%"

        height="100%"

        frameborder="0"

        allow="camera; microphone; autoplay; encrypted-media;"

        src="https://form.typeform.com/to/AQlHXdch?typeform-medium=embed-snippet"

      ></iframe>

      <script>

          type="text/javascript"

          src="https://embed.typeform.com/embed.js"

      </script>

    </div>

  </body>

</html>

My Answer:
One possible issue could be that the typeform is not fully loaded before the beforeunload event is triggered. Make sure that the typeform is fully loaded and ready before trying to prevent the user from closing or refreshing the page.

Another issue could be that the beforeunload event is being overridden by other event listeners or scripts on the page. Make sure that there are no conflicting scripts that are preventing the beforeunload event from firing.

You can also try using the event.returnValue property to display a custom message in the confirmation dialog. Here is an example code snippet:

javascript

window.addEventListener('beforeunload', function (e) {

    e.returnValue = 'Are you sure you want to leave this page?';

});

If none of these solutions work, you may need to provide more information or code snippets for further assistance.

John Davidson

javascript - Issues with beforeunload not preventing refresh/closing

Rate this post

Comments