转自：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. maven总结5

    上篇文章中项目最终发布的release仓库和快照仓库都是nexus的默认仓库,若所有的本地开发项目版本都发布到同一个仓库,可能会造成冲突.因此,我们可以为每一个项目创建一组仓库(快照版本和releas ...

  2. JavaScript Boolean 对象

    JavaScript Boolean 对象 Boolean 对象 Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false). Bool ...

  3. wk_02

    Python 序列 序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推.序列都可以进行的操作包括索引,切片,加,乘,检 ...

  4. mysql游标循环的使用

    CREATE PROCEDURE `test`.`new_procedure` () BEGIN DECLARE done INT DEFAULT FALSE; -- 需要定义接收游标数据的变量 ); ...

  5. 截取视图某一段另存为部分视图(Partial View)

    在做ASP.NET MVC后台管理程序时,根据程序需要,Isus.NET需要实现一个功能,就是动态截取视图某一段另存为部分视图Partial View. 思路为在视图中,使用jQury的程序截图以及P ...

  6. Android 编译命令 make j8 2>&1 | tee build.log 解释

    在编译Android的时候,经常看到这样的命令 make  -j8 2>&1 | tee build.log  其中 make 是编译命令, -j8 这里的 8 指的是线程数量,就是你要 ...

  7. noi题库（noi.openjudge.cn） 1.8编程基础之多维数组T01——T10

    T01 矩阵交换行 描述 给定一个5*5的矩阵(数学上,一个r×c的矩阵是一个由r行c列元素排列成的矩形阵列),将第n行和第m行交换,输出交换后的结果. 输入 输入共6行,前5行为矩阵的每一行元素,元 ...

  8. jQuery使用.on()无法绑定hover

    发现好像没有hover这个事件,jQuery的hover事件是一个封装,hover算不得一个事件.他只是将mouseover和mouseout合并了用mouseover和mouseout两个配合效果好 ...

  9. JavaScript中正则表达式test()、exec()、match() 方法区别

    1.test test 返回 Boolean,查找对应的字符串中是否存在模式.var str = "1a1b1c";var reg = new RegExp("1.&qu ...

  10. .NET基于Redis缓存实现单点登录SSO的解决方案

    一.基本概念 最近公司的多个业务系统要统一整合使用同一个登录,这就是我们耳熟能详的单点登录,现在就NET基于Redis缓存实现单点登录做一个简单的分享. 单点登录(Single Sign On),简称 ...