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

  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与主框架跨域相互访问方法【转】

    转自:http://blog.csdn.net/fdipzone/article/details/17619673 1.同域相互访问 假设A.html 与 b.html domain都是localho ...

  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. Coursera, Machine Learning, Neural Networks: Representation - week4/5

    Neural Network Motivations 想要拟合一条曲线,在feature 很多的情况下,feature的组合也很多,在现实中不适用,比如在computer vision问题中featu ...

  2. steps/train_mono.sh

    <<单音素HMM的训练流程图.vsdx>> 定义拓扑结构.参数初始化 $ gmm-init-mono --shared-phones=$lang/phones/sets.int ...

  3. Caused by: java.lang.NoSuchMethodError: javax.servlet.ServletContext.getClassLoader()Ljava/lang/ClassLoader;

    运行tomat  报错: Caused by: java.lang.NoSuchMethodError: javax.servlet.ServletContext.getClassLoader()Lj ...

  4. B - Tree Rotations HYSBZ - 2212 （线段树合并）

    题目链接:https://cn.vjudge.net/contest/287725#problem/B 题目大意:现在有一棵二叉树,所有非叶子节点都有两个孩子.在每个叶子节点上有一个权值(有n个叶子节 ...

  5. python 微信跳一跳辅助 复现

    本来用的是苹果ios得手机,但是步骤较为复杂,没有吃透,最后妥协用了android的机器搞得. 首先找到大牛的github https://github.com/wangshub/wechat_jum ...

  6. Win10提示无法创建新的分区也找不到现有的分区解法

    原文链接:https://www.pconline.com.cn/win10/1126/11261093.html 1.格式化整个硬盘,重新分区 如果你的硬盘上没有重要数据的话,到了分区这一步时,将硬 ...

  7. Lock类-ReentrantLock的使用

    在Java多线程中可以使用synchronized隐式锁实现线程之间同步互斥,Java5中提供了Lock类(显示锁)也可以实现线程间的同步,而且在使用上更加方便.本文主要研究 ReentrantLoc ...

  8. Debian9 使用 Docker 安装 gitlab完整过程

    一. 安装Docker CE (参考 官网指南) 1. 卸载老版本 sudo apt-get remove docker docker-engine docker.io  2. Update the ...

  9. CSDN沙龙记录

    Panel python踩过的坑 曹正: 原因:语言的理解不精准. 语言特性坑:函数的参数不可变类型的定义类似list[],惰性处理简而言之延后执行, 胡阳: gevent的问题,django连接池的 ...

  10. Windows PowerShell 入門（8）－関数編3

    この連載では.Microsoftが提供している新しいシェル.Windows PowerShellの使い方を解説します.今回は.フィルタ.スクリプトブロック.変数のスコープについて取り上げます. はじめ ...