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"><html xmlns="http://www.w3.org/1999/xhtml"><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" /> <link href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.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
0
Hello Ron,
All the best,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.
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!