• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > iframe跨域通信封装详解

iframe跨域通信封装详解

作者:小夜 Clifford 字体:[增加 减小] 来源:互联网

小夜 Clifford 通过本文主要向大家介绍了iframe跨域,iframe跨域访问等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

iframe跨域通信

查看演示        源码下载

众所周知,由于前端javascript对跨域访问做了安全限制,javascript只能访问与包含它的文档在同一域下的内容。

用法举例:

需求是在http://www.demo.org/top.html中通过iframe方式嵌入http://www.iframe.com/iframe.html,而在iframe页面中希望通过点击一个按钮,调用top页面的一个js方法。

1. 在top页面中建立方法供内部页面使用

function testFun (text) {
 alert(text);
}

2. 在http://www.demo.org/top.html中嵌入iframe

<iframe width="320" height="240" src="http://www.iframe.com/iframe.html"></iframe>

3. 建立www.demo.org域下建立一个代理页面http://www.demo.org/proxy.html用于跨域通信使用

4. 在http://www.demo.org/proxy.html加入用于代理页面的逻辑

5. 在http://www.iframe.com/iframe.html页面中通过js配置代理页面地址

TopProxyConfig = {url:'http://www.demo.org/proxy.html'};

6. 通过kissy加载通信模块

KISSY.use('topproxy', function(S, TopProxy){
//执行代码
});

7. 在http://www.iframe.com/iframe.html通过TopProxy.call直接访问http://www.demo.org/top.html中的方法,如

KISSY.use('topproxy', function(S, TopProxy){
 TopProxy.call('testFun', '这是一个真实的故事');
});

其中call方法的第一个参数是外部网页的全局方法名,支持“.”,后面参数无限个,均传到目标方法里去。

注:

1. 调用后可能不会立即执行,会等到iframe加载完毕后才触发,如果想预加载可以提前执行一个没用的方法。
2. 如果不设置TopProxyConfig,那么会认为引用iframe和父iframe同域(大域)并直接调用top对象。
3. 在IE678下可能直接调用top中的系统方法会报错,由于系统方法不支持apply。

原理:

A页面嵌日的iframe页面B,其中B想调用A的方法并传递数据,那么可在B中嵌入A页面同域下的一个iframe页面C,C可以通过window.top访问到A的window。那么在B中可以改变C的href的hash向C传递一些信息,然后C再把这些信息传递给A,从而间接达到B给A传递信息的目的

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • iframe跨域通信封装详解

相关文章

  • JQery jstree 大数据量问题解决方法
  • jQuery源码分析之jQuery中的循环技巧详解
  • jQuery插件bxSlider实现响应式焦点图
  • jQuery Mobile弹出窗、弹出层知识汇总
  • jQuery实现网页顶部固定导航效果代码
  • jQuery 1.9.1源码分析系列(十五)之动画处理
  • jquery实现类似淘宝星星评分功能有截图
  • jQuery获取节点和子节点文本的方法
  • jquery实现图片左右切换的方法
  • jQuery Validate插件自定义验证规则的方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • JQuery CheckBox(复选框)操作方法汇总
    • 终于实现了!精彩的jquery弹幕效果
    • 一个用jquery写的判断div滚动条到底部的方法【推荐】
    • chrome下jq width()方法取值为0的解决方法
    • jQuery+CSS3折叠卡片式下拉列表框实现效果
    • 简单的jquery拖拽排序效果实现代码
    • 解决jquery submit()提交表单提示:f[s] is not a function
    • Tinymce+jQuery.Validation使用产生的BUG
    • JQuery contains的选择器
    • jQuery实现checkbox全选的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有