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

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

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

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

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

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

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

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

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

  例如:www.baidu.com 和www.sohu.com

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

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

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

 //以下是主域不同时
       var data = {};
         var hash_url;
         function dealHash() {
             hash_url = window.location.hash;//获取到参数
             var datas = hash_url.split("#")[1].split("&");
             for (var i = 0; i < datas.length; i++) {
                 var t = datas[i].split("=");
                 data[t[0]] = decodeURIComponent(t[1]);
             }
         }

         function change() {
             if (hash_url != window.location.hash) {
                 dealHash();
                 document.getElementById("FolderName").value = data["currentFolder"];
             }
         }

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

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

代理页面的实现:

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

JavaScript跨域实现的更多相关文章

  1. JavaScript 跨域漫游

    前言: 最近在公司做了几个项目都涉及到了iframe,也就是在这些iframe多次嵌套的项目中,我发现之前对iframe的认识还是比较不足的,所以就静下心来,好好整理总结了iframe的相关知识:&l ...

  2. 利用javascript跨域访问cookie之广告推广

    在上一篇<说一说javascript跨域和jsonp>中,利用JSONP进行了跨域的数据访问,利用JS本身的跨域能力在远端生成HTML结构的方式完成了一个小广告. 在实际应用中, 跨域使用 ...

  3. Javascript跨域问题总结

    疯狂的JSONP 关于JSON与JSONP简单总结 window.name实现的跨域数据传输 JavaScript跨域总结与解决办法 flash跨域策略文件crossdomain.xml配置详解

  4. 优雅绝妙的Javascript跨域问题解决方案

    关于Javascript跨域问题的解决方案已在之前的一片文章中详细说明,详见:http://blog.csdn.net/sfdev/archive/2009/02/13/3887006.aspx: 除 ...

  5. JavaScript 跨域:window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  6. thinkphp,javascript跨域请求解决方案

    javascript跨域请求解决方案 前言 对于很多前端或者做混合开发的同学,我们难免会遇到跨域发起请求业务,比如A站点向B站点请求数据等等.由于最近要做一个站点集群的项目,所以具体业务要求很多个站点 ...

  7. JavaScript 跨域之 POST 实现。

    javascript 跨域是一个很常见的问题,其中 jsonp 是一个最常用的手段,但是 jsonp 只支持 get,不支持 post,所以如果想通过 jsonp 来 post 一些数据,就头大了. ...

  8. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

  9. JavaScript跨域解决方式

    平时工作中经常被JavaScript跨域问题所困扰,其实有很多种解决方式,下面给大家介绍常用的几种: 1.jsonp解决跨域问题 客户端代码: <!DOCTYPE html> <ht ...

随机推荐

  1. 【原】使用Xfermode正确的绘制出遮罩效果

    以前写as3的时候,遮罩效果一个mask属性就搞定了,真是方便. 转到android上以后,发现要实现类似的效果,可以使用Xfermode,android一共提供了三种: AvoidXfermode; ...

  2. appium+java+junit demo运行

    对java熟悉一些,所以想用java把appium给做起来.今天用myeclipse给环境和Demo弄了一下,网上没有一篇全套资料的. 各块环境的搭建: 1.安装appium客户端,省略下载和安装步骤 ...

  3. Oracle开发之窗口函数 rows between unbounded preceding and current row

    目录=========================================1.窗口函数简介2.窗口函数示例-全统计3.窗口函数进阶-滚动统计(累积/均值)4.窗口函数进阶-根据时间范围统计 ...

  4. word2vec模型原理与实现

    word2vec是Google在2013年开源的一款将词表征为实数值向量的高效工具. gensim包提供了word2vec的python接口. word2vec采用了CBOW(Continuous B ...

  5. 设计模式:建造者模式(Builder)

    定   义:将一个复杂对象的构建与它的表示分离,使得同一构建过程可以创建不同的表示. 结构图: 产品类: class Product { //部件集合 List<string> parts ...

  6. Oracle DataGuard 物理Standby 搭建(上)

    物理standby database 环境搭建 Arch asysnc Oracle Dataguard host IP Oracle_sid DB_unique_name FAL_server FA ...

  7. Manacher算法----最长回文子串

    题目描述 给定一个字符串,求它的最长回文子串的长度. 分析与解法 最容易想到的办法是枚举所有的子串,分别判断其是否为回文.这个思路初看起来是正确的,但却做了很多无用功,如果一个长的子串包含另一个短一些 ...

  8. 5、Web应用程序中的安全向量 -- Open Redirect Attack(开放重定向)

    开放重定向攻击的概念:那些通过请求(如查询字符串和表单数据)指定重定向URL的Web应用程序可能会被篡改,而把用户重定向到外部的恶意URL. 在执行重定向之前需先检查目标地址的有效性,可使用Url.I ...

  9. java第二次作业之一

    package dama; public class person { private String name; private String sex; private int age; privat ...

  10. Codefoces 277 E. Binary Tree on Plane

    题目链接:http://codeforces.com/problemset/problem/277/E 参考了这篇题解:http://blog.csdn.net/Sakai_Masato/articl ...