iframe与主框架跨域相互访问方法

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iframe与主框架跨域相互访问方法相关的知识，希望对你有一定的参考价值。

转自：http://blog.csdn.net/fdipzone/article/details/17619673

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

 

[html] view plain copy
 
 技术分享技术分享
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  5.   <title> main window </title>  
  6.   
  7.   <script type="text/javascript">  
  8.   // main js function  
  9.   function fMain(){  
  10.     alert(‘main function execute success‘);  
  11.   }  
  12.   
  13.   // exec iframe function  
  14.   function exec_iframe(){  
  15.     window.myframe.fIframe();  
  16.   }  
  17.   </script>  
  18.   
  19.  </head>  
  20.   
  21.  <body>  
  22.   <p>A.html main</p>  
  23.   <p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p>  
  24.   <iframe src="B.html" name="myframe" width="500" height="100"></iframe>  
  25.  </body>  
  26. </html>  


B.html

 

 

[html] view plain copy
 
 技术分享技术分享
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  5.   <title> iframe window </title>  
  6.   
  7.   <script type="text/javascript">  
  8.   // iframe js function   
  9.   function fIframe(){  
  10.     alert(‘iframe function execute success‘);  
  11.   }  
  12.   
  13.   // exec main function  
  14.   function exec_main(){  
  15.     parent.fMain();  
  16.   }  
  17.   </script>  
  18.   
  19.  </head>  
  20.   
  21.  <body>  
  22.   <p>B.html iframe</p>  
  23.   <p><input type="button" value="exec main function" onclick="exec_main()"></p>  
  24.  </body>  
  25. </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调用

 

[javascript] view plain copy
 
 技术分享技术分享
  1. <script type="text/javascript">  
  2. parent.window.myframe.fIframe(); // execute parent myframe fIframe function  
  3. </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 调用

 

[javascript] view plain copy
 
 技术分享技术分享
  1. <script type="text/javascript">  
  2. parent.parent.fMain(); // execute main function  
  3. </script>  

这样就能实现 A.html 与 B.html 跨域相互调用。

 

A.html

 

[html] view plain copy
 
 技术分享技术分享
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  5.   <title> main window </title>  
  6.   
  7.   <script type="text/javascript">  
  8.   
  9.   // main js function  
  10.   function fMain(){  
  11.     alert(‘main function execute success‘);  
  12.   }  
  13.   
  14.   // exec iframe function  
  15.   function exec_iframe(){  
  16.     if(typeof(exec_obj)==‘undefined‘){  
  17.         exec_obj = document.createElement(‘iframe‘);  
  18.         exec_obj.name = ‘tmp_frame‘;  
  19.         exec_obj.src = ‘http://127.0.0.1/execB.html‘;  
  20.         exec_obj.style.display = ‘none‘;  
  21.         document.body.appendChild(exec_obj);  
  22.     }else{  
  23.         exec_obj.src = ‘http://127.0.0.1/execB.html?‘ + Math.random();  
  24.     }  
  25.   }  
  26.   </script>  
  27.   
  28.  </head>  
  29.   
  30.  <body>  
  31.   <p>A.html main</p>  
  32.   <p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p>  
  33.   <iframe src="http://127.0.0.1/B.html" name="myframe" width="500" height="100"></iframe>  
  34.  </body>  
  35. </html>  


B.html

 

 

[html] view plain copy
 
 技术分享技术分享
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  5.   <title> iframe window </title>  
  6.   
  7.   <script type="text/javascript">  
  8.   // iframe js function   
  9.   function fIframe(){  
  10.     alert(‘iframe function execute success‘);  
  11.   }  
  12.   
  13.   // exec main function  
  14.   function exec_main(){  
  15.     if(typeof(exec_obj)==‘undefined‘){  
  16.         exec_obj = document.createElement(‘iframe‘);  
  17.         exec_obj.name = ‘tmp_frame‘;  
  18.         exec_obj.src = ‘http://localhost/execA.html‘;  
  19.         exec_obj.style.display = ‘none‘;  
  20.         document.body.appendChild(exec_obj);  
  21.     }else{  
  22.         exec_obj.src = ‘http://localhost/execA.html?‘ + Math.random();  
  23.     }  
  24.   }  
  25.   </script>  
  26.   
  27.  </head>  
  28.   
  29.  <body>  
  30.   <p>B.html iframe</p>  
  31.   <p><input type="button" value="exec main function" onclick="exec_main()"></p>  
  32.  </body>  
  33. </html>  


execA.html

 

 

[html] view plain copy
 
 技术分享技术分享
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  5.   <title> exec main function </title>  
  6.  </head>  
  7.   
  8.  <body>  
  9.     <script type="text/javascript">  
  10.         parent.parent.fMain(); // execute main function  
  11.     </script>  
  12.  </body>  
  13. </html>  


execB.html

 

 

[html] view plain copy
 
 技术分享技术分享
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  5.   <title> exec iframe function </title>  
  6.  </head>  
  7.   
  8.  <body>  
  9.     <script type="text/javascript">  
  10.         parent.window.myframe.fIframe(); // execute parent myframe fIframe function  
  11.     </script>  
  12.  </body>  
  13. </html>  


执行如下图：

 

技术分享

技术分享

以上是关于iframe与主框架跨域相互访问方法的主要内容，如果未能解决你的问题，请参考以下文章

php main 与 iframe 相互通讯类(同域/跨域)

iframe跨域访问父框架js方法

iframe父子相互调用，相互操作DOM

iframe与父页面之间通讯跨域问题

如何用javascript 跨域获取iframe子页面的元素信息

GWT 阻止源为“http://localhost”的框架访问跨域框架