从Iframe调用父窗口方法

时间:2012-06-19 13:44:08

标签: javascript jquery iframe same-origin-policy

我知道这是跨浏览器通信或同源策略的问题,浏览器不允许这样的通信。

我需要一个解决这个用例的工作。我在HTTP中有一个父页面,从那里我将表单提交到HTTPS,我的要求是不要离开页面,表单在叠加层中打开

这是我目前的JSP设置

<form:form action="https://localhost:9002/myApp/springSecurity/login" class="login-form error-info"  id="loginForm"  method="post" commandName="loginForm" target="guestFrame">

 <iframe width="0" frameborder="0" scrolling="no" name="guestFrame" >

从服务器发送java脚本在响应中附加到iframe上,这是从服务器发送的java脚本

<html><body>"+ "<script type=\"text/javascript\">parent.handleResponse('error',securityLoginStatus.getLoginFailedException());</script>"+ "</body></html>")

我已在父窗口中定义了一个方法handle-response,但我在浏览器中遇到以下错误

Permission denied to access property 'handleResponse'

我甚至尝试使用parent.wwindow.handleResponse但是得到同样的错误。 有什么方法可以从iframe与父窗口进行通信吗?

2 个答案:

答案 0 :(得分:0)

如前所述,除非html起源和命运都在http://localhost:9002域之下,否则无法避免交叉原始权限被拒绝。

为方便起见,我建议使用javascript / json / jsonp docs的http通信。 您可以尝试使用类似的东西:

<script type="text/javascript">
function sendPost () {
    $.ajax({
      type: 'POST',
      url: 'https://localhost:9002/myApp/springSecurity/login',
      data: $("#guestFrame").serialize(),
      error: function(data, status) {
        // alert('Error ' + status);
      }
    });
}
function handleResponse(obj) {
    if (obj.type==="error") {
        alert("Error: " + obj.mssg);
    }
}
</script>

<form ...>
 ...
 <input type="submit" value="send" onclick="sendPost();return(false)"/>
</form>

为了避免CORS限制,https://localhost:9002/myApp/springSecurity/login html响应必须是javascript代码并包含 以下标题:

<% 
response.setHeader("Content-type", "application/x-javascript");
response.setHeader("Access-Control-Allow-Origin", "*");
%>

Javascript示例响应,它将能够调用其父调用者的“handleResponse”:

handleResponse({'type':'error', 'mssg': 'your_login_failed_exception'});

答案 1 :(得分:0)

您还可以使用http://easyxdm.net/wp/等框架进行跨域调用