Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

KENDO UI with IFRAME - Alert Exit Browser

6 Answers 390 Views
Window
This is a migrated thread and some comments may be shown as answers.
Steufa
Top achievements
Rank 1
Steufa asked on 13 Aug 2019, 09:57 PM
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 :)

6 Answers, 1 is accepted

Sort by
0
Steufa
Top achievements
Rank 1
answered on 14 Aug 2019, 11:42 AM

 

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>

 

 

0
Aleksandar
Telerik team
answered on 14 Aug 2019, 01:45 PM
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.
0
Steufa
Top achievements
Rank 1
answered on 14 Aug 2019, 03:15 PM

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.

0
Aleksandar
Telerik team
answered on 15 Aug 2019, 03:07 PM
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.
0
Steufa
Top achievements
Rank 1
answered on 15 Aug 2019, 06:18 PM
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.
0
Aleksandar
Telerik team
answered on 19 Aug 2019, 07:45 AM
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.
Tags
Window
Asked by
Steufa
Top achievements
Rank 1
Answers by
Steufa
Top achievements
Rank 1
Aleksandar
Telerik team
Share this question
or