[js] post 方式打開新窗口

一、前因

一般我們是用 window.open(url,name,params); 打開新窗口， url 會攜帶一些參數， 但存在參數過多，引發url 過長截斷，無法打開正確窗口， 所以我們需要使用 post 方式來實現新窗口打開。

post 打開新窗口有兩種方法：

• ajax 形式
• form 表單

備注：
url 為打開窗口鏈接；
name 為窗口名稱；
params 為窗口參數，比如 height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no
參數可參考 http://www.cnblogs.com/stswordman/archive/2006/06/02/415853.html

二、實踐

方一 ajax 推薦！

var params = {
    name: 'hxy',
    desc: 'dahuamao'
};
var win = window.open();   // 放在外面是因為瀏覽器可能會阻止新打開窗口，放在異步請求外面就ok ！！！
$.ajax({
    url: '/report/preview',
    type: 'post',
    data: params,
    asyn: false
}).done(function(data) {
    var doc = win.document;
    doc.write(data);    // !!! 關鍵，接收后端的數據並進行新窗口寫入
    doc.close();
});

方二 form 形式

// post 提交參數
var params = {
    name: 'hxy',
    desc: 'dahuamao'
};
var tempForm = $('<form style="display:none;" id="tempForm" method="POST" target="_blank" action="/report/preview"></form>');

$.each(params, function(k,v) {
    console.log(k,v);
    var hideInput = $('<input name="' + k + '" value=' + v + ' type="hidden"/>');
    tempForm.append(hideInput);
});

$('body').append(tempForm);

tempForm.submit();
tempForm.remove();

兩種方法后端都一樣，以node 后端 為例， 邏輯為 解析 post 請求的參數，並返回模板

    var params = this.request.body;
    yield this.render('report/index.html', {
        name: params.name,
        desc: params.desc
    });