web项目跨域访问
1.同域相互訪問
假設A.html?與?b.html?domain都是localhost?（同域）
A.html中iframe 嵌入 B.html，name=myframe
A.html有js function fMain()
B.html有js function fIframe()
需要實現 A.html 調用 B.html 的 fIframe()，B.html 調用 A.html 的 fMain()
A.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> main window </title><script type="text/javascript">// main js functionfunction fMain(){alert('main function execute success');}// exec iframe functionfunction exec_iframe(){window.myframe.fIframe();}</script></head><body><p>A.html main</p><p><input type="button" value="exec iframe function" οnclick="exec_iframe()"></p><iframe src="B.html" name="myframe" width="500" height="100"></iframe></body> </html>?
B.html
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title> iframe window </title><script type="text/javascript">// iframe js function function fIframe(){alert('iframe function execute success');}// exec main functionfunction exec_main(){parent.fMain();}</script></head><body><p>B.html iframe</p><p><input type="button" value="exec main function" οnclick="exec_main()"></p></body> </html>?
點擊A.html?的 exec iframe function button，執行成功，彈出iframe function execute success。如下圖
?
點擊B.html?的 exec main function button，執行成功，彈出?main function execute success。如下圖
2.跨域互相訪問
假設?A.html?domain是?localhost，?B.html?domain 是?127.0.0.1?（跨域）
這里使用 localhost 與 127.0.0.1 只是方便測試，localhost 與 127.0.0.1已經不同一個域，因此執行效果是一樣的。
實際使用時換成 www.domaina.com 與 www.domainb.com 即可。
A.html中iframe 嵌入 B.html，name=myframe
A.html有js function fMain()
B.html有js function fIframe()
需要實現 A.html 調用 B.html 的 fIframe()，B.html 調用 A.html 的 fMain() （跨域調用）
如果使用上面同域的方法，瀏覽器判斷A.html 與 B.html 不同域，會有錯誤提示。
Uncaught SecurityError: Blocked a frame with origin "http://localhost" from accessing a frame with origin "http://127.0.0.1". Protocols, domains, and ports must match.
?
實現原理：
因為瀏覽器為了安全，禁止了不同域訪問。因此只要調用與執行的雙方是同域則可以相互訪問。
?
首先，A.html?如何調用B.html的 fIframe方法
1.在A.html 創建一個 iframe
2.iframe的頁面放在 B.html 同域下，命名為execB.html
3.execB.html 里有調用B.html fIframe方法的js調用
<script type="text/javascript"> parent.window.myframe.fIframe(); // execute parent myframe fIframe function </script>這樣A.html 就能通過 execB.html 調用 B.html 的 fIframe 方法了。
?
同理，B.html 需要調用A.html fMain方法，需要在B.html 嵌入與A.html 同域的 execA.html?
execA.html 里有調用 A.html fMain 方法的js 調用
<script type="text/javascript"> parent.parent.fMain(); // execute main function </script>這樣就能實現 A.html 與 B.html 跨域相互調用。
?
A.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> main window </title><script type="text/javascript">// main js functionfunction fMain(){alert('main function execute success');}// exec iframe functionfunction exec_iframe(){if(typeof(exec_obj)=='undefined'){exec_obj = document.createElement('iframe');exec_obj.name = 'tmp_frame';exec_obj.src = 'http://127.0.0.1/execB.html';exec_obj.style.display = 'none';document.body.appendChild(exec_obj);}else{exec_obj.src = 'http://127.0.0.1/execB.html?' + Math.random();}}</script></head><body><p>A.html main</p><p><input type="button" value="exec iframe function" οnclick="exec_iframe()"></p><iframe src="http://127.0.0.1/B.html" name="myframe" width="500" height="100"></iframe></body> </html>?
B.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">// iframe js function function fIframe(){alert('iframe function execute success');}// exec main functionfunction exec_main(){if(typeof(exec_obj)=='undefined'){exec_obj = document.createElement('iframe');exec_obj.name = 'tmp_frame';exec_obj.src = 'http://localhost/execA.html';exec_obj.style.display = 'none';document.body.appendChild(exec_obj);}else{exec_obj.src = 'http://localhost/execA.html?' + Math.random();}}</script></head><body><p>B.html iframe</p><p><input type="button" value="exec main function" οnclick="exec_main()"></p></body> </html>?
execA.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.fMain(); // execute main function</script></body> </html>?
execB.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 iframe function </title></head><body><script type="text/javascript">parent.window.myframe.fIframe(); // execute parent myframe fIframe function</script></body> </html>?
執行如下圖：
?
轉載于:https://www.cnblogs.com/shindo/p/5710409.html
總結
- 上一篇： ZooKeeper Programmer
- 下一篇： monkey 环境搭建