從Iframe調用父窗口方法

我知道這是一個跨瀏覽器通信或同源策略的問題，瀏覽器不允許這樣的通信。從Iframe調用父窗口方法

我需要一個圍繞此用例的工作。我在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的腳本在響應中的I幀被追加服務器，這是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中的父窗口進行通信？

來源

2012-06-19 Umesh Awasthi

我假設'parent.wwindow'也是一個錯字。 –

是的，這只是一個錯字:)在實際的代碼中，它的父代' –

嘗試'window.top.handleResponse'。 –

正如您之前所說的，除非html起源和命運都在http://localhost:9002域之下，否則無法避免跨源許可被拒絕。

爲了方便起見，我建議使用http通信與javascript/json/jsonp文檔。你可以嘗試jQuery的有類似的東西：

<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'});

來源

2012-06-20 11:41:02

你可以也使用框架，如http://easyxdm.net/wp/進行跨域調用

來源

2013-02-27 21:49:39 nuway

從Iframe調用父窗口方法

回答

相關問題