程序博客网 > 淘宝客漏洞

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

来源：互联网 发布：淘宝客漏洞 编辑：程序博客网 时间：2024/05/16 04:15
转载来源:http://blog.csdn.net/fdipzone/article/details/17619673

[置顶] iframe与主框架跨域相互访问方法

标签： iframemain跨域父窗口子窗口
2013-12-27 23:11 154356人阅读 评论(66)收藏举报
分类：
作者同类文章X

    版权声明：本文为博主原创文章，未经博主允许不得转载。如需转载可私信或关注公众号fdipzone-idea与我联系。

    目录(?)[-]

    1. 同域相互访问
    2. 跨域互相访问

    iframe 与主框架相互访问方法


    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

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

    B.html

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

    [javascript] view plain copy
    print?
    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 调用

    [javascript] view plain copy
    print?
    1. <script type="text/javascript">  
    2. parent.parent.fMain(); // execute main function  
    3. </script>  
    这样就能实现 A.html 与 B.html 跨域相互调用。

    A.html

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

    B.html

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

    execA.html

    [html] view plain copy
    print?
    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.   
    8.  <body>  
    9.     <script type="text/javascript">  
    10.         parent.parent.fMain(); // execute main function  
    11.     </script>  
    12.  </body>  
    13. </html>  

    execB.html

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

    执行如下图：




    源码下载地址：点击查看


    Tips:我已封装成类，文章地址《php main 与 iframe 相互通讯类(同域/跨域)》



    顶
    11
    踩
    7
     
     
    阅读全文
    0 0
    淘宝客漏洞 淘宝客漏洞
    原创粉丝点击
    热门IT博客
    linux eth0 没有iplinux eth0 没有ip
    sql select 创建表sql select 创建表
    女装淘宝货源
    入骨相思知不知书包网
    windows下安装spark
    2017 nba体测数据
    c udp网络编程
    linux的snmpd 服务
    php 页面跳转白名单
    linux 更改用户 id
    影视类毕业设计 知乎
    mac nginx 安装
    天津华北设计院知乎
    音乐系统cms
    自学c语言能找到工作吗
    js 事件触发target
    编程求圆的周长和面积
    世纪矩阵交易员
    哈尔滨工程大学网络
    淘宝那家高达店好
    热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 乐视视频看不了怎么办 小孩发烧到38度怎么办 1岁宝宝发烧38度怎么办 小孩发烧了怎么办如何退烧 微信朋友圈降权怎么办 新开淘宝店没生意怎么办 店铺没流量没访客怎么办 水压低热水器不打火怎么办 毛巾用久了发黄怎么办 洗完毛巾有异味怎么办 洗白衬衫发黄了怎么办 洗车高压管破了怎么办 魔力探测石没了怎么办 苹果激活码忘了怎么办 磨剪子磨换了怎么办 楼梯对着卧室门怎么办 知乎登录不上怎么办 知乎帐号被停用怎么办 把红颜知己睡了怎么办 钱串花叶子黄怎么办 招财树叶子枯萎怎么办 儿童下颌骨后缩怎么办 玻尿酸下巴太尖怎么办 碰到用假币的人怎么办 有人威胁要打我怎么办 w10电池图标没了怎么办 宽带连接不上怎么办678 宽带连接不上怎么办651 苹果4s打不开机怎么办 借贷宝逾期2天怎么办 火灾来了怎么办20字 疥疮长在龟头上怎么办 办婚礼不到10桌怎么办 ipad用久了太卡怎么办 wi-fi密码忘记了怎么办 wifi密码又忘了怎么办 苹果5s信号差怎么办 电信光纤猫坏了怎么办 电脑突然只有c盘怎么办 极路由密码忘了怎么办 游戏里遇到喷子怎么办

    程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里