javascript代码实例教程-JavaScript跨域实现

发布时间:2019-01-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript跨域实现脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 最近在做个上传文件的服务,其中包含一个上传的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              //主域相同、子域不同时 传递一个参数id

9         });

复制代码

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

 

  例如:www.baidu.com 和www.sohu.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 = "https://t.ceshi2.com/Proxy.htML?" + new Date().getTime();

4             iframe.src = (url + "#filename=" + data);

5         }

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript跨域实现全部内容,希望文章能够帮你解决javascript代码实例教程-JavaScript跨域实现所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。