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 相关文章推荐
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
js创建对象的方法汇总
Jan 07 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
Webpack path与publicPath的区别详解
2018/05/03 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python os模块学习笔记
2015/06/21 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
python+flask实现API的方法
2018/11/21 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
Python变量类型知识点总结
2019/02/18 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
thinkphp5 路由分发原理
2021/03/18 PHP
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
参观接待方案
2014/03/17 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
电子商务实训报告总结
2014/11/05 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书