转自：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. luogu[2093]零件分组

    题目描述 某工厂生产一批棍状零件,每个零件都有一定的长度(Li)和重量(Wi).现在为了加工需要,要将它们分成若干组,使每一组的零件都能排成一个长度和重量都不下降(若i<j,则Li<=Lj ...

  2. 开源框架】Android之史上最全最简单最有用的第三方开源库收集整理，有助于快速开发

    [原][开源框架]Android之史上最全最简单最有用的第三方开源库收集整理,有助于快速开发,欢迎各位... 时间 2015-01-05 10:08:18 我是程序猿,我为自己代言 原文  http: ...

  3. Linux下锁定账号，禁止登录系统的设置总结

    在我们运维工作中,会经常要求一些用户不允许登陆系统,以加固系统安全.今天这里介绍下锁定账号登陆的几种方法: 一.最常用方式,修改用户的shell类型为/sbin/nologin  (推荐使用)这种方式 ...

  4. 今天看了shell大神的写的一个统计脚本

    通过nginx日志统计接口耗时排行 grep '/bigbox?' access_log | awk '{print $7"&process="$NF}'| sed -r ...

  5. 快速编写代码zencode

    #是 id .是class $是数字 {}是标签中内容 *个数 ^上一级

  6. oracle编程总结

    1,SEQUENCE的使用 问题:在MSSQL中,我们可以通过设置自增长来作为主键,但是oracle里面没有这个 解决方案:使用SEQUENCE来实现,具体步骤如下 (1)首先建立一个序列(就是每次查 ...

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

    T11 图像旋转 描述 输入一个n行m列的黑白图像,将它顺时针旋转90度后输出. 输入 第一行包含两个整数n和m,表示图像包含像素点的行数和列数.1 <= n <= 100,1 <= ...

  8. Spring Security笔记：登录尝试次数限制

    今天在前面一节的基础之上,再增加一点新内容,默认情况下Spring Security不会对登录错误的尝试次数做限制,也就是说允许暴力尝试,这显然不够安全,下面的内容将带着大家一起学习如何限制登录尝试次 ...

  9. 多线程下HashMap的死循环问题

    多线程下[HashMap]的问题: 1.多线程put操作后,get操作导致死循环.2.多线程put非NULL元素后,get操作得到NULL值.3.多线程put操作,导致元素丢失. 本次主要关注[Has ...

  10. 别出心裁的Linux系统调用学习法

    别出心裁的Linux系统调用学习法 操作系统与系统调用 操作系统(Operating System,简称OS)是计算机中最重要的系统软件,是这样的一组系统程序的集成:这些系统程序在用户对计算机的使用中 ...