博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript跨域实现
阅读量:4315 次
发布时间:2019-06-06

本文共 2127 字,大约阅读时间需要 7 分钟。

  最近在做个上传文件的服务,其中包含一个上传的web页面。目的是想客户端页面嵌套这个web页面,然后直接将文件上传到服务器。

  因为文件不同所以需要保存到的文件夹名称也不一样,所以客户端需要传递一个文件夹名称,告诉服务器端要保存的目标位置,这涉及到iframe的参数传递:ClientàServer

文件上传成功后服务器端返回文件名称或者相关信息到客户端,以便进行其它操作。这又涉及到一次参数传递:Server->Client

      以上算是这个上传工具大的概要。但是我做的笔记主要是关于参数传递的问题。这里我涉及到了JavaScript跨域问题,我的实现分两种情况,同样有两种方式实现(网上有很多关于跨域的实例和说明)

  第一种情况: 主域相同,子域不同

  例如:a.baidu.com和b.baidu.com

  关键使用document.domain=”ceshi.com”语句,在客户端页面和服务器端页面都加上。

1 document.domain = "ceshi.com"; //主域相同、子域不同时2 $("#mainFrame").load(function () {3             var clientHeight = $("#mainFrame").contents().find("body").height();4             var clientWidth = $("#mainFrame").contents().find("body").width();5             $(this).height(clientHeight);6             $(this).width(clientWidth);7             $("#mainFrame").contents().find("input[id=hiddenId]").val("100"); 8              //主域相同、子域不同时 传递一个参数id9         });

  第二种情况: 主域不相同,就是域名不同

  例如:www.baidu.com 和

  这种情况比较麻烦,我使用的是window.location.hash,客户端需要加个代理页面。

 传递原理:客户端主页调用时使用#currentFolder=####传递参数

服务器端页面使用以下代码接收并保存到一个input Hidden中

1 //以下是主域不同时 2       var data = {}; 3         var hash_url; 4         function dealHash() { 5             hash_url = window.location.hash;//获取到参数 6             var datas = hash_url.split("#")[1].split("&"); 7             for (var i = 0; i < datas.length; i++) { 8                 var t = datas[i].split("="); 9                 data[t[0]] = decodeURIComponent(t[1]);10             }11         }12 13         function change() {14             if (hash_url != window.location.hash) {15                 dealHash();16                 document.getElementById("FolderName").value = data["currentFolder"];17             }18         }

等上传成功后再调用callback方法传递文件名称,这个正好和客户端传递参数到服务端相反,只不过这个把信息传给了客户端代理。这样客户端的代理页面和主页通信更容易些。

1 function callback(data) {2             var iframe = document.getElementById("mainFrame");3             var url = "http://t.ceshi2.com/proxy.html?" + new Date().getTime();4             iframe.src = (url + "#filename=" + data);5         }

代理页面的实现:

window.parent.parent.Add(document.getElementById("hiddenId").value);这句话就是执行主页的Add方法:

转载于:https://www.cnblogs.com/doublej/p/4043419.html

你可能感兴趣的文章
86.运算符重载
查看>>
cxx signal信号捕获
查看>>
《Android开发艺术探索》读书笔记——Cha3.2.3改变布局参数实现View的滑动
查看>>
python闭包与装饰器
查看>>
Acegi 源码解释
查看>>
Activity的几种启动跳转方式
查看>>
LCA最近公共祖先Tarjan(离线)
查看>>
牛客练习赛16 E求值
查看>>
matlab rank
查看>>
Asp.net系列--基础篇(三)
查看>>
css基础
查看>>
如何在tomcat中如何部署java EE项目
查看>>
【Python基础教程第2版】——第二讲:列表和元组
查看>>
小常识
查看>>
使用vscode开发python
查看>>
swift--调用系统单例实现打电话
查看>>
0038-算一算是一年中的第几天
查看>>
51nod 1094 【水题】
查看>>
003.第一个动画:绘制直线
查看>>
ng-深度学习-课程笔记-2: 神经网络中的逻辑回归(Week2)
查看>>