jQuery实现跨域iframe接口方法调用


Posted in Javascript onMarch 14, 2015

cross.js

(function(global){

  global.Cross = {

    signalHandler: {},

    on: function(signal, func){

      this.signalHandler[signal] = func;

    },

    call: function(win, domain, signal, data, callbackfunc){

      var notice = {"signal": signal, "data": data};

      if(!!callbackfunc){

          notice["callback"] = "callback_" + new Date().getTime();

          Cross.on(notice["callback"], callbackfunc);

      }

      var noticeStr = JSON.stringify(notice);

      win.postMessage(noticeStr, domain);

    }

  };

  $(window).on("message", function(e) {

    var realEvent = e.originalEvent,

        data = realEvent.data,

        swin = realEvent.source,

        origin = realEvent.origin,

        protocol;

    try {

        protocol = JSON.parse(data);

        var result = global.Cross.signalHandler[protocol.signal].call(null, protocol.data);

        if(!!protocol["callback"]){

          Cross.call(swin, origin, protocol["callback"], {result: result});

        }

        if(/^callback_/.test(protocol.signal)){

          delete Cross.signalHandler[protocol.signal];

        }

    } catch (e) {

      console.log(e);

      throw new Error("cross error.");

    }

  });

})(window);

a.html

<!doctype HTML>

<html>

  <head>

    <script src="jquery-1.8.3.min.js"></script>

    <script src="cross.js"></script>

    <script>

      function call_b(){

        var ifw = $("#ifr")[0].contentWindow;

        //调用iframe子页面的公开的test接口, 子页面域名为http://localhost:8088

        Cross.call(ifw,"http://localhost:8088","test",{t: $("#txt").val()});

      }

    </script>

  </head>

  <body>

    <input id="txt" type="text"/>

    <button onclick="call_b()">call</button>

    <iframe id="ifr" src="http://localhost:8088/b.html"></iframe>

  </body>

</html>

b.html

<!doctype HTML>

<html>

  <head>

    <script src="jquery-1.8.3.min.js"></script>

    <script src="cross.js"></script>

    <script>

    //对外公开一个接口命名为test

    Cross.on("test", function(data){

      alert(data.t);

    });

    </script>

  </head>

  <body>

  </body>

</html>

以上就是本文所述的iframe跨域的解决方案了,希望大家能够喜欢。

Javascript 相关文章推荐
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
vue分页插件的使用方法
Dec 25 Javascript
js实现批量删除功能
Aug 27 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 #Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 #Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 #Javascript
javascript实现数独解法
Mar 14 #Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 #Javascript
纯javascript实现简单下拉刷新功能
Mar 13 #Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 #Javascript
You might like
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
Smarty3配置及入门语法
2017/02/22 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
初探nodeJS
2017/01/24 NodeJs
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
vue指令做滚动加载和监听等
2019/05/26 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Python简单实现enum功能的方法
2016/04/25 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
Python对列表的操作知识点详解
2019/08/20 Python
Python实现图像的垂直投影示例
2020/01/17 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
晨会主持词
2014/03/17 职场文书
小学生操行评语
2014/04/22 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
闪闪红星观后感
2015/06/08 职场文书
《为人民服务》教学反思
2016/02/20 职场文书