iframe與主框架跨域相互訪問實(shí)現(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()
需要實(shí)現(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>
點(diǎn)擊A.html 的 exec iframe function button，執(zhí)行成功，彈出iframe function execute success。如下圖
點(diǎn)擊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 只是方便測(cè)試，localhost 與 127.0.0.1已經(jīng)不同一個(gè)域，因此執(zhí)行效果是一樣的。
實(shí)際使用時(shí)換成 www.domaina.com 與 www.domainb.com 即可。
A.html中iframe 嵌入 B.html，name=myframe
A.html有js function fMain()
B.html有js function fIframe()
需要實(shí)現(xiàn) A.html 調(diào)用 B.html 的 fIframe()，B.html 調(diào)用 A.html 的 fMain() （跨域調(diào)用）
如果使用上面同域的方法，瀏覽器判斷A.html 與 B.html 不同域，會(huì)有錯(cuò)誤提示。
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.
實(shí)現(xiàn)原理：
因?yàn)闉g覽器為了安全，禁止了不同域訪問。因此只要調(diào)用與執(zhí)行的雙方是同域則可以相互訪問。
首先，A.html 如何調(diào)用B.html的 fIframe方法
1.在A.html 創(chuàng)建一個(gè) 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>
這樣就能實(shí)現(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í)行如下圖：
源碼下載地址：點(diǎn)擊查看
相關(guān)文章
javascript實(shí)現(xiàn)對(duì)表格元素進(jìn)行排序操作
這篇文章主要介紹了javascript實(shí)現(xiàn)對(duì)表格元素進(jìn)行排序操作，分別可以實(shí)現(xiàn)點(diǎn)擊之后排序和還原，和排升序和降序的功能，文章末尾附完整代碼，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了JavaScript作用域、作用域鏈和閉包的用法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-09-09
詳釋JavaScript執(zhí)行環(huán)境與執(zhí)行棧
一句話就可以概括：代碼 ( 包括函數(shù) ) 執(zhí)行時(shí)所需要的所有信息就是執(zhí)行環(huán)境。由于 ES 歷經(jīng)多個(gè)版本，所以執(zhí)行環(huán)境的標(biāo)準(zhǔn)也一直在變。文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
js實(shí)現(xiàn)調(diào)用網(wǎng)絡(luò)攝像頭及常見錯(cuò)誤處理
這篇文章主要介紹了js實(shí)現(xiàn)調(diào)用網(wǎng)絡(luò)攝像頭及常見錯(cuò)誤處理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
數(shù)組是幾乎所有編程語言的基礎(chǔ)語法，本文將不會(huì)介紹數(shù)組的基礎(chǔ)語法和用法，而是從JavaScript中數(shù)組的一些特殊之處入手，通過這些少有特性的詳細(xì)介紹，加深我們對(duì)數(shù)組的理解2023-02-02
JS函數(shù)式編程之純函數(shù)、柯里化以及組合函數(shù)
js抽獎(jiǎng)實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)代碼效果
