iframe 跨域調用父級方法的方案
阿新 • • 發佈：2017-09-25
nbsp head java math tex append 跨域 undefined utf-8
一、如果高層域名相同的話，可以通過document.domain來實現跨域訪問
例如：
父級域名：localhost:8080
子級域名：localhost:9090
那麽可以設置document.domain = ‘localhost‘ 來實現跨域訪問
二、如果域名沒有相同之處
先來做一個假設：假如
我現在有兩個系統，一個是工作流服務平臺，其中一個功能就是“代辦”；
另一個是OA系統，現在我要在OA系統中直接嵌入工作流服務平臺的代辦頁面，而代辦頁面的中，點擊處理又會打開OA系統提供的審批頁面，審批頁面中有個按鈕“同意”；
工作流程服務平臺的代辦頁面為 db.html，OA系統提供的審批頁面為 sp.html，當在sp.html中點擊“同意”按鈕後，要求代辦頁面更新數據。
1.工作流服務平臺需要的代碼：（假設域名為localhost:9090）
db.html: （子頁面是sp.html）
<html>
<script>
function refresh(){
document.getElementById(‘data‘).innerHTML = ‘2222‘;
}
</script>
<body>
<div id="data">111</div>
</body>
</html>
execRefresh.html: （這是實現跨域的關鍵）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> exec main function </title> </head> <body> <script type="text/javascript"> parent.parent.refresh(); // execute main function </script> </body> </html>
2.OA系統需要的代碼：(假設域名為 127.0.0.1:9090)
sp.html（是db.html的子頁面）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> iframe window </title> <script type="text/javascript"> // exec main function function exec_main(){ if(typeof(exec_obj)==‘undefined‘){ exec_obj = document.createElement(‘iframe‘); exec_obj.name = ‘tmp_frame‘; exec_obj.src = ‘http://localhost:9090/zz/execRefresh.html‘; exec_obj.style.display = ‘none‘; document.body.appendChild(exec_obj); }else{ exec_obj.src = ‘http://localhost:9090/zz/execRefresh.html?‘ + Math.random(); } } </script> </head> <body> <p>B.html iframe</p> <p><input type="button" value="同意" onclick="exec_main()"></p> </body> </html>
註：請重點註意紅色字體
iframe 跨域調用父級方法的方案