转自：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. JavaScript Math 对象

    JavaScript Math 对象 Math 对象 Math 对象用于执行数学任务. Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(). 语法 var ...

  2. php的一些小细节

    1.今天看见 $arr3 = array_filter($arr, create_function('$v', 'return strlen($v);')); 作用就是去掉为空的元素,其实当callb ...

  3. Centos6 安装 Redis

    先确认gcc和tcl已经安装 sudo yum install gcc-c++ sudo yum install tcl 解压, 编译和安装 .tar.gz /usr/src/ cd /usr/src ...

  4. JQuery学习

    首先要明白一点,JQuery是一个JS的封装库,目的是为了关注点分离,让前端更加侧重于界面显示,而不是各个浏览器不同的差异性,下面是JQuery的一些常用的基本用法 一,JQuery语法 window ...

  5. Java 集合系列11之 Hashtable详细介绍(源码解析)和使用示例

    概要 前一章,我们学习了HashMap.这一章,我们对Hashtable进行学习.我们先对Hashtable有个整体认识,然后再学习它的源码,最后再通过实例来学会使用Hashtable.第1部分 Ha ...

  6. git 本地分支与远程分支

    github上已经有master分支 和dev分支 在本地 git checkout -b dev 新建并切换到本地dev分支 git pull origin dev 本地分支与远程分支相关联 在本地 ...

  7. 反复请求某个URL缓存严重解决办法

    有2个iframe页面A和B 点击B页面某按钮刷新A,A缓存严重. 后来发现是因为反复请求同样的URL,浏览器就在调用缓存. 解决方法是在URL后添加一个当前时间即可 var url,e=/[?]/g ...

  8. 清北学堂2017NOIP冬令营入学测试P4745 B’s problem(b)

    清北学堂2017NOIP冬令营入学测试 P4745 B's problem(b) 时间: 1000ms / 空间: 655360KiB / Java类名: Main 背景 冬令营入学测试 描述 题目描 ...

  9. Android 的图片异步请求加三级缓存 ACE

    使用xUtils等框架是很方便,但今天要用代码实现bitmapUtils 的功能,很简单, 1 AsyncTask请求一张图片 ####AsyncTask #####AsyncTask是线程池+han ...

  10. 异常和IO

    异常 异常是指java程序运行时(非编译)所发生的非正常情况或错误. Java对异常进行了分类,不同类型的异常分别用不同的 Java 类表示,所有异常的根类为 java.lang.Throwable, ...