最近在做個上傳文件的服務，其中包含一個上傳的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 = "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方法：
