iframe與主框架跨域相互訪問實現(xiàn)方法
1.同域相互訪問
假設(shè)A.html 與 b.html domain都是localhost （同域）
A.html中iframe 嵌入 B.html，name=myframe
A.html有js function fMain()
B.html有js function fIframe()
需要實現(xiàn) A.html 調(diào)用 B.html 的 fIframe()，B.html 調(diào)用 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 function
function fMain(){
alert('main function execute success');
}
// exec iframe function
function exec_iframe(){
window.myframe.fIframe();
}
</script>
</head>
<body>
<p>A.html main</p>
<p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p>
<iframe src="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 function
function exec_main(){
parent.fMain();
}
</script>
</head>
<body>
<p>B.html iframe</p>
<p><input type="button" value="exec main function" onclick="exec_main()"></p>
</body>
</html>
點擊A.html 的 exec iframe function button，執(zhí)行成功，彈出iframe function execute success。如下圖
點擊B.html 的 exec main function button，執(zhí)行成功，彈出 main function execute success。如下圖
2.跨域互相訪問
假設(shè) A.html domain是 localhost， B.html domain 是 127.0.0.1 （跨域）
這里使用 localhost 與 127.0.0.1 只是方便測試，localhost 與 127.0.0.1已經(jīng)不同一個域，因此執(zhí)行效果是一樣的。
實際使用時換成 www.domaina.com 與 www.domainb.com 即可。
A.html中iframe 嵌入 B.html，name=myframe
A.html有js function fMain()
B.html有js function fIframe()
需要實現(xiàn) A.html 調(diào)用 B.html 的 fIframe()，B.html 調(diào)用 A.html 的 fMain() （跨域調(diào)用）
如果使用上面同域的方法，瀏覽器判斷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.
實現(xiàn)原理：
因為瀏覽器為了安全，禁止了不同域訪問。因此只要調(diào)用與執(zhí)行的雙方是同域則可以相互訪問。
首先，A.html 如何調(diào)用B.html的 fIframe方法
1.在A.html 創(chuàng)建一個 iframe
2.iframe的頁面放在 B.html 同域下，命名為execB.html
3.execB.html 里有調(diào)用B.html fIframe方法的js調(diào)用
<script type="text/javascript"> parent.window.myframe.fIframe(); // execute parent myframe fIframe function </script>
這樣A.html 就能通過 execB.html 調(diào)用 B.html 的 fIframe 方法了。
同理，B.html 需要調(diào)用A.html fMain方法，需要在B.html 嵌入與A.html 同域的 execA.html
execA.html 里有調(diào)用 A.html fMain 方法的js 調(diào)用
<script type="text/javascript"> parent.parent.fMain(); // execute main function </script>
這樣就能實現(xiàn) A.html 與 B.html 跨域相互調(diào)用。
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 function
function fMain(){
alert('main function execute success');
}
// exec iframe function
function 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" onclick="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 function
function 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" onclick="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>
執(zhí)行如下圖：
源碼下載地址：點擊查看
相關(guān)文章
不用MOUSEMOVE也能滑動啊...2007-05-05
使用純javascript實現(xiàn)經(jīng)典掃雷游戲
本文給大家分享的是個人剛開始學習javascript的時候?qū)懙姆聎indows經(jīng)典的掃雷游戲的代碼，當時只是寫了下來，沒加注釋，這里補上，有需要的小伙伴可以參考下。2015-04-04
今天小編就為大家分享一篇layui table 參數(shù)設(shè)置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
閃爍的原理是什么呢：其實就一個，display在none與block之間頻繁的交替，這樣說你明白了么，示例代碼如下，希望對大家有所幫助2014-06-06
JavaScript 驗證碼的實例代碼(附效果圖)，需要的朋友可以參考一下2013-03-03
這篇文章主要為大家介紹了tree?shaking功能及使用原理詳細解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪的相關(guān)資料2023-01-01
這篇文章主要介紹了JS實現(xiàn)提示效果彈出及延遲隱藏的功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
在js讀取文本框或者其它表單數(shù)據(jù)的時候獲得的值是字符串類型的,例如兩個文本框a和b,如果獲得a的value值為11,b的value值為9 ,那么a.value要小于b.value,因為他們都是字符串形式的.在網(wǎng)上找了一下js字符串轉(zhuǎn)數(shù)字的文章,這個比較全2013-03-03
當我們需要判斷用戶輸入的是否全是空格,或用戶在不輸入內(nèi)容的情況下使用回車發(fā)送,此時我們?nèi)绻枨髢?nèi)容不能為空,常規(guī)判斷無法識別,空格本身也有l(wèi)ength,這個時候就可使用到下列兩種方式2023-10-10
這篇文章主要為大家介紹了JS導(dǎo)航欄navigator的一些冷知識使用方法實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12