转自：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

  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. <script type="text/javascript">
  7. // main js function
  8. function fMain(){
  9. alert('main function execute success');
  10. }
  11. // exec iframe function
  12. function exec_iframe(){
  13. window.myframe.fIframe();
  14. }
  15. </script>
  16. </head>
  17. <body>
  18. <p>A.html main</p>
  19. <p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p>
  20. <iframe src="B.html" name="myframe" width="500" height="100"></iframe>
  21. </body>
  22. </html>

B.html

  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. <script type="text/javascript">
  7. // iframe js function
  8. function fIframe(){
  9. alert('iframe function execute success');
  10. }
  11. // exec main function
  12. function exec_main(){
  13. parent.fMain();
  14. }
  15. </script>
  16. </head>
  17. <body>
  18. <p>B.html iframe</p>
  19. <p><input type="button" value="exec main function" onclick="exec_main()"></p>
  20. </body>
  21. </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调用

  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 调用

  1. <script type="text/javascript">
  2. parent.parent.fMain(); // execute main function
  3. </script>

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

A.html

  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. <script type="text/javascript">
  7. // main js function
  8. function fMain(){
  9. alert('main function execute success');
  10. }
  11. // exec iframe function
  12. function exec_iframe(){
  13. if(typeof(exec_obj)=='undefined'){
  14. exec_obj = document.createElement('iframe');
  15. exec_obj.name = 'tmp_frame';
  16. exec_obj.src = 'http://127.0.0.1/execB.html';
  17. exec_obj.style.display = 'none';
  18. document.body.appendChild(exec_obj);
  19. }else{
  20. exec_obj.src = 'http://127.0.0.1/execB.html?' + Math.random();
  21. }
  22. }
  23. </script>
  24. </head>
  25. <body>
  26. <p>A.html main</p>
  27. <p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p>
  28. <iframe src="http://127.0.0.1/B.html" name="myframe" width="500" height="100"></iframe>
  29. </body>
  30. </html>

B.html

  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. <script type="text/javascript">
  7. // iframe js function
  8. function fIframe(){
  9. alert('iframe function execute success');
  10. }
  11. // exec main function
  12. function exec_main(){
  13. if(typeof(exec_obj)=='undefined'){
  14. exec_obj = document.createElement('iframe');
  15. exec_obj.name = 'tmp_frame';
  16. exec_obj.src = 'http://localhost/execA.html';
  17. exec_obj.style.display = 'none';
  18. document.body.appendChild(exec_obj);
  19. }else{
  20. exec_obj.src = 'http://localhost/execA.html?' + Math.random();
  21. }
  22. }
  23. </script>
  24. </head>
  25. <body>
  26. <p>B.html iframe</p>
  27. <p><input type="button" value="exec main function" onclick="exec_main()"></p>
  28. </body>
  29. </html>

execA.html

  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. <body>
  8. <script type="text/javascript">
  9. parent.parent.fMain(); // execute main function
  10. </script>
  11. </body>
  12. </html>

execB.html

  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. <body>
  8. <script type="text/javascript">
  9. parent.window.myframe.fIframe(); // execute parent myframe fIframe function
  10. </script>
  11. </body>
  12. </html>

执行如下图：

iframe与主框架跨域相互访问方法【转】的更多相关文章

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

    iframe 与主框架相互访问方法  http://blog.csdn.net/fdipzone/article/details/17619673/ 1.同域相互访问 假设A.html 与 b.htm ...

  2. 计算机网络之iframe内联框架跨域

    iframe框架同源下的数据调用 iframe框架非同源下的数据传输 一.iframe框架同源下的数据调用 1.父窗口向子窗口获取数据 //html1父级窗口 <iframe src=" ...

  3. js 利用iframe和location.hash跨域解决的方法，java图片上传回调JS函数跨域

    奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图   上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, functi ...

  4. CORSFilter 跨域资源访问

    CORS 定义 Cross-Origin Resource Sharing(CORS)跨来源资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,是 ...

  5. JAVA跨域资源访问CORSFilter

    当一个资源从与该资源本身所在的服务器不同的域或端口不同的域或不同的端口请求一个资源时,资源会发起一个跨域 HTTP 请求. 出于安全考虑,浏览器会限制从脚本内发起的跨域HTTP请求.跨域资源共享机制允 ...

  6. IIS Manager 配置文件修该，允许跨域CORS访问

    IIS Manager 配置文件修该,允许跨域CORS访问 IIS Manager 的api访问会出现跨域问题,需要 IIS Manager的配置文件中修改. 配置文件的路径:C:\Program F ...

  7. Tornado—添加请求头允许跨域请求访问

    跨域请求访问 如果是前后端分离,那就肯定会遇到cros跨域请求难题,可以设置一个BaseHandler,然后继承即可. class BaseHandler(tornado.web.RequestHan ...

  8. nginx 跨域请求访问

    1.nginx跨域请求访问 location ~ .*\.(htm|html)$ { add_header Access-Control-Allow-Origin(请求域名) *(所有域名) http ...

  9. 解决 Golnag Gin框架跨域

    package main import ( "github.com/gin-gonic/gin" "awesomeProject/app/app_routers" ...

随机推荐

  1. [No000048]程序员的成长过程中，有哪些阶段？

    有人在 Quora 提问,并补充: 有木有朋友能根据你们自身经历,清晰地划分各个阶段?比如:学习第一门编程语言.第一份工作.职业决策.理解 IT 公司的目标,等等. Quincy Larson 的回复 ...

  2. uva167 The Sultan's Successors

    The Sultan's Successors Description The Sultan of Nubia has no children, so she has decided that the ...

  3. hashmap先按照value从大到小排序，value相等时按照key从小到大排序

    hashmap先按照value从大到小排序,value相等时按照key从小到大排序. [2]是从小到大排序,在[2]代码基础上交换o1,o2位置即可. 代码中用到[1]中提到的在value相等时再比较 ...

  4. 改变TableView中的分割线位置

    加上以下代码,可以让系统的分割线位置置于起始位置 #pragma mark --- 设置分割线位置为起始位置-(void)viewDidLayoutSubviews{    if ([self.tab ...

  5. avalon.js路由

    之前自己写了一个AJAX加载页面的方法:有时候一个页面里面会分区域加载不同的东西(div,html),但是IE的回退按钮,就失去任何意义了: 这两天研究了一下avalon.js的路由: 需要准备: 1 ...

  6. Tomcat 增加静态文件目录, 外部目录

    很简单, 随手记下: conf目录下的server.xml, 在对应的里面增加一行: <Context docBase="/home/tomcat/archives/adserver& ...

  7. Hibernate总结1（入门）

    1,官网包简介 整体简介 Project包简介,这个包里有etc文件,这个etc主要包括了配置文件,最主要的是hibernate.cfg.xml文件 lib文件夹包含的是需要加载的依赖jar包,必须加 ...

  8. ASP.NET 单点登陆

    第一种:同主域但不同子域之间实现单点登陆 Form验证其实是基于身份cookie的验证.客户登陆后,生成一个包含用户身份信息(包含一个ticket)的cookie,这个cookie的名字就是在web. ...

  9. hadoop 2.6伪分布安装

    hadoop 2.6的“伪”分式安装与“全”分式安装相比,大部分操作是相同的,主要区别在于不用配置slaves文件,而且其它xxx-core.xml里的参数很多也可以省略,下面是几个关键的配置: (安 ...

  10. springmvc集成shiro登录失败处理

    一般的登录流程会有:用户名不存在,密码错误,验证码错误等.. 在集成shiro后,应用程序的外部访问权限以及访问控制交给了shiro来管理. shiro提供了两个主要功能:认证(Authenticat ...