KENDO UI with IFRAME - Alert Exit Browser

7 posts, 0 answers
  1. Steufa
    Steufa avatar
    5 posts
    Member since:
    Aug 2019

    Posted 13 Aug 2019 Link to this post

    Hello,

    I am using KENDO UI with IFRAME and I want to display an alert when the user clicks to close his WEB browser when the IFRAME is active with KENDO.

    Thank you in advance :)
  2.
  3. Steufa
    Steufa avatar
    5 posts
    Member since:
    Aug 2019

    Posted 14 Aug 2019 Link to this post

     

    My code : 

    <html>
    <head>
        <meta charset="utf-8"/>
        <title>TEST IFRAME</title>
     
     
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        
    </head>
    <body>
     
        <button id="refresh" class="k-button k-primary" title="START">START</button>
    <div id="messageDialog"></div>
        <script>
           var isClosed = false;
          $("#refresh").click(function(e) {
            e.preventDefault();
     
            var id = "target_iframe";
     
            var dialog = $("<div><iframe class='k-content-frame' name='" + id + "'></div>").kendoWindow({
             title: "test",
              close: function() { this.destroy() },
              iframe: true,
              close: function(e) {
          if(!isClosed) {
            $("#messageDialog").kendoDialog({
             title: "test",
              content: "Exit ?",
              visible: false,
               show: function() {
                e.preventDefault();
              },
              actions: [{
                  text: "Exit",
                  action: function(e){
                    setTimeout(function() {
                      isClosed = true;
                      $("#target_iframe").data("kendoWindow").close();
                    }, 200);
                  },
                  primary: true
              },{
                  text: "Cancel"
              }]
            }).data("kendoDialog").open();
          }
        },
        deactivate: function() {
          isClosed = false;
        }
            });
     
            dialog.data("kendoWindow").center().open();
     
     
            $("<form />", {
                action: "https://www.mywebsite.com/",
                method: "post",
                target: id
            })
                .hide().appendTo("body")
                   // add any data
                  .append("<input name='foo' />").find("[name=foo]").val("bar").end()
                .submit().remove();
          });
     
     
    </script>
     
    </body>
    </html>

     

     

  5. Aleksandar
    Admin
    Aleksandar avatar
    236 posts

    Posted 14 Aug 2019 Link to this post

    Hello Steufa,

    In this dojo you'll find a demo of the desired behavior.

    The following steps will guide you in implementing the desired behavior:
     1) You need to bind the destroy() method on the close event of the kendo Window to ensure the HTML elements of the widget are removed from the DOM upon closing.
     2) The beforeunload event fires when the window, the document and its resources are about to be unloaded. That is whenever the user tries to leave the browser page. When the event occurs you check whether the kendo Window is present on the DOM and display the alert if present.   

    In this dojo you'll find the code snippet you provided, slightly modified, demonstrating the desired behavior. 

    I hope this helps. Let me know if you have further questions.

    Regards,
    Aleksandar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Steufa
    Steufa avatar
    5 posts
    Member since:
    Aug 2019

    Posted 14 Aug 2019 Link to this post

    Hello Aleksandar :)

    Thank you very much for your return.

    Your code will display an alert when closing the IFRAME, and what I'm trying to do is display an alert when I close the browser and the IFRAME is active.

  8.
  9. Aleksandar
    Admin
    Aleksandar avatar
    236 posts

    Posted 15 Aug 2019 Link to this post

    Hello Steufa,

    The beforeunload method requires that the window is focused, meaning there was some interaction with the page. The provided examples will show alerts in both cases - when you try to close the iframe and when you try to close the browser window, after there was some user interaction. If you try to open and directly close the window, containing the iframe, the event will not fire.

    I suggest you review the MDN documentation for the beforeunload method and WindowEventHandlers.onbeforeunload and try to programatically focus the window and verify if this approach is suitable for your application.
     
    Regards,
    Aleksandar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  11. Steufa
    Steufa avatar
    5 posts
    Member since:
    Aug 2019

    Posted 15 Aug 2019 in reply to Aleksandar Link to this post

    Oh sorry, I did not understand! Thank you so much :)

    On IE and CHROME it works perfectly, however on FIREFOX it closes the browser without displaying the alert.
  13. Aleksandar
    Admin
    Aleksandar avatar
    236 posts

    Posted 19 Aug 2019 Link to this post

    Hello Steufa,

    According to the MDN documentation this is an expected behavior for Firefox:
    "Note also, that various browsers ignore the result of the event and do not ask the user for confirmation at all. In such cases, the document will always be unloaded automatically. Firefox has a switch named dom.disable_beforeunload in about:config to enable this behaviour."

    However I found this thread where a workaround was proposed. In this dojo you'll find an updated example, where the desired functionality is implemented and works on IE, Chrome, Opera and Firefox.

    Regards,
    Aleksandar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  14.
Back to Top