This is a migrated thread and some comments may be shown as answers.

Closing a cross domain window from inside itself.

1 Answer 148 Views
Window
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 2
Ron asked on 26 Sep 2012, 01:29 PM

I have a window being launched from a page in a different doamain trying to close itself.

So, in domain A... I have the div tag in my page.

<div id="open" class="openWindow" style="text-align: center"></div>

.. and in the script I'm using to launch the window:

$('#open').parent().addClass("openWindow");
 
var windowOpen = $("#open");
 
if (!windowOpen.data("kendoWindow")) {
    windowOpen.kendoWindow({
        width: "400px",
        height: "320px",
        title: "Open",
        actions: ["Refresh", "Close"],
        visible: false,
        });
}
 
windowOpen.data("kendoWindow").center();
windowOpen.data("kendoWindow").open();

Also, in domain B, I have the open.htm file and with the following script.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="IE=Edge" http-equiv="X-UA-Compatible" />
    <title>Open</title>
    <meta content="Ronald E. Zepp II" name="author" />
    <meta content="width=device-width; initial-scale=1.0" name="viewport" />
    <!-- !CSS -->
    <link href="Scripts/html5reset-1.6.1.css" rel="stylesheet" />
        rel="Stylesheet" />
    <link href="Scripts/kendo.agile2.css" rel="Stylesheet" />
    <!-- JS -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js" type="text/javascript"></script>
    <script src="Scripts/bc.open-1.0.0.js" type="text/javascript"></script>
</head>
<body id="open-window-body">
<table style="background-color: #F8F8FF">
    <tr>
        <td style="padding: 10px; margin: 10px"></td>
        <td> CICode or Partnumber: </td>
        <td><input type="text" id="item" class="k-textbox" style="margin-left: 10px; width: 200px; margin-right: 10px" /></td>
        <td style="width: 100%;"></td>
    </tr>
    <tr style="height: 15px">
        <td colspan="3"></td>
        <td style="width: 100%;"></td>
    </tr>
    <tr>
        <td style="padding: 10px; margin: 10px"></td>
        <td colspan="3"><div id="org_list"
                style="border: thin solid #94c0d2; height: 200px; width:340px; overflow: auto"></div></td>
    </tr>
    <tr style="height: 15px">
        <td colspan="3"></td>
        <td style="width: 100%;"></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td colspan="2" style="text-align: right; white-space: nowrap;"><input id="Ok" type="button" class="k-button" value="Ok" style="width: 90px; height: 30px; margin-bottom: 10px; margin-right: 10px;" /><input type="button" class="k-button" id="Cancel" value="Cancel" style="width: 90px; height: 30px; margin-right: 10px; margin-bottom: 10px;" /></td>
    </tr>
</table >
    <div id="window" style="text-align: right" >
        <table>
            <tr valign="middle" >
                <td><img id="window_image" src="images/stop.png" alt="" />
                </td>
                <td style="padding-right: 5px; padding-left: 5px"></td>
                <td class="anr-message-text">
                    <div id="window_message">Test Message</div>
                </td>
            </tr>
        </table>
        <div style="text-align: right">
            <button id="Yes" class="k-button">Yes</button>
            <button id="No" class="k-button">No</button>
        </div>
    </div>
 
</body>
    <script type="text/x-kendo-tmpl" id="template">
        <div>          
            ${OrgCode} ${Name}
        </div>
    </script>
</html>

 

$("#Cancel").click(function () {
    $("#Cancel").closest(".k-window-content").data("kendoWindow").close();
});

Now, when I click the cancel button using the recommended way to reach the close funcion, I get the following error:

SCRIPT5007: Unable to get value of the property 'close': object is null or undefined

Same domain, window.parent works fine, different domain... and I can't get the window to close itself.

1 Answer, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 27 Sep 2012, 11:09 AM

Hello Ron,

This is a browser security feature, called the same-origin policy. You can use the postMessage API to trigger an event in the parent frame, and handle this event to close the window.

All the best,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Window
Asked by
Ron
Top achievements
Rank 2
Answers by
Alex Gyoshev
Telerik team
Share this question
or