雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

Js子页面调用父页面方法涉及到的跨域问题及处理

2016-09-23 分类:前端之旅 阅读(4735) 评论(0)

今天做图片上传功能模块, 就是当前页面点击打开一个frame层, 在frame 里面上传图片,如果图片上传完成,Js 在子页面通知父页面处理完成的数据信息,因为上传的frame和使用的不是同一个网站,所以涉及到了跨域的问题!

首先,使用layer的弹窗插件,把之前处理好的frame 打开:

1
2
3
4
5
6
7
8
9
10
11
function upload() {
    //iframe层
    layer.open({
        type: 2,
        title: '上传图片',
        shadeClose: true,
        shade: 0.8,
        area: ['680px', '450px'],
        content: 'http://file.XXX.com/uploads.php' //iframe的url
    });
}

这里当前页面的域名是 www.xxx.com

具体iframe 里面,已经处理好了图片上传功能,并在上传完成后通知父页面

1
2
3
4
5
6
onSuccess: function(file, response){          // 文件上传成功的回调方法
    console.info("此文件上传成功:");
    console.info(file.name);
    $.fn.cache('<?php echo isset($_GET['name'])?$_GET['name']:'imgData'; ?>',response);
    window.parent.UploadSuccess(response);//调用父页面
},

这里域名是 file.xxx.com

父页面的处理逻辑

1
2
3
4
5
6
7
8
9
10
11
function UploadSuccess(data) {
    var data = Function('return '+ data +'')();
    if(data.code > 0){
        layer.msg('上传成功',{shadow:false,time:2000},function(){
            layer.closeAll();
            toDealwith(data);//处理图片数据
        })
    }else{
        layer.msg('上传失败');
    }
}

然而因为域名不同,所以会报错

QQ图片20160923162914

所以我们这里需要做一个设置:
document.domain = “xiangmijie.com”;

两个页面加入,这样的话,就在同一域下面

QQ图片20160923163224

然后调用成功!

 

分享到:更多 ()
标签:数据处理

相关推荐

  • 关于PHP实现守护进程的方式总结
  • JS输出格式化的json字符串
  • krpano xml 文件参数详解
  • 关于mysql主键自增变成非1的解决办法
  • PHP的反射类 ReflectionClass、ReflectionMethod 使用方法探索
  • 使用PHP的QueryList来写一个小爬虫玩玩~
  • 微信公公众号系统单条文字消息触发后台程序进行多次数据交互解决方案
  • jquery 如何给动态插入的元素绑定 hover事件
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年7月
一 二 三 四 五 六 日
« 六    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说:
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说:
  • Dawn 9年前 (2016-09-16)说:
    call_user_func_array最后的例子是错哦,你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说:
    tp框架设置了全局捕获异常的,这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说:
    构造函数里的判断 用异常机制可能更好一些

其他类型

  • 芊云全景
  • 配音兔AI配音神器

博客类型

  • 芊云全景
  • 配音兔AI配音神器

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔AI配音神器

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图