Question

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

我需要一个解决这个用例的工作。我在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与父窗口进行通信吗？

Answer 1

如前所述，除非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'});

Answer 2

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

从Iframe调用父窗口方法

2 个答案: