今天正好需要用到iframe 與主框架相互訪問的實現方法，正好看到了這篇文章，確實不錯，特分享一下,需要的朋友可以參考下
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 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，執行成功，彈出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 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>
登入後複製
###執行如下圖：############## #######
以上是iframe與主框架跨域相互存取方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
