使用js在新窗口中POST数据

最近在做自己的博客，写文章的时候有一个预览功能，当时使用的是弹出框来进行预览，感觉体验不是很好。

然后想到了写邮件时候的新窗口预览，查了下126邮箱和qq邮箱的预览实现效果，以及各种谷歌百度stackoverflow进行搜索。得出以下方案。

        /*
        * 在新窗口POST
        * action: form的action属性，要post的地址(url)
        * data: form中的数据，数据格式为 [{name: "", value: ""}, {name: "", value: ""}]
        * data的值可以使用jQuery的方法 $("#form1").serializeArray()获得。
        */
        createPostNewWindow: function(action, data){
            var _doc = document;
            var _form = _doc.createElement("form");
            _form.method = "POST";
            _form.target = "_blank";
            _form.action = action;
            
            data.forEach(function(element) {
                var _input = _doc.createElement("input");
                _input.type = "hidden";
                _input.name = element.name;
                _input.value = element.value;
                _form.appendChild(_input);
            });
            
            _doc.body.appendChild(_form);
            _form.submit();
            _doc.body.removeChild(_form);
        }

126邮箱的预览的js代码没有扒到，最后扒到了qq邮箱的写法，然后进行了修改。

qq邮箱的代码文件地址为(做了防盗链)：http://rescdn.qqmail.com/zh_CN/htmledition/js/webp/compose2285a6b.js

其实现的核心代码：

        _createPostNewWindow: function(_asName, _asSrc, _aoData, _asWinParam) {
            var _oCompose = this;
            var _oWin = _oCompose.getWin();
            var _oTop = getTop();
            var _oDoc = _oWin.document;
            var _sNewWinFormId = "_creAtenEWpOstwIn_";
            _oNewWinForm = getTop().S(_sNewWinFormId, _oWin);
            if (!_oNewWinForm) 
            {
                _oNewWinForm = _oDoc.createElement("form");
                _oNewWinForm.id = _sNewWinFormId;
                _oNewWinForm.method = "post";
                _oDoc.body.appendChild(_oNewWinForm);
            }
            _oNewWinForm.innerHTML = "";
            if (_asSrc.indexOf("sid=") < 0) 
            {
                _asSrc = [_asSrc, _asSrc.indexOf("?") < 0 ? "?" : "&", "sid=", getTop().getSid()].join("");
            }
            _oNewWinForm.action = _asSrc;
            _oNewWinForm.target = _asName;
            _oNewWinForm.onsubmit = function() {
                _oWin.open('about:blank', _asName, _asWinParam);
            }
            ;
            _aoData = _aoData || {};
            _aoData.sid = _aoData.sid || getTop().getSid();
            getTop().E(_aoData, function(_asValue, _asKey) {
                var _oInput = _oDoc.createElement("input");
                _oInput.type = "hidden";
                _oInput.name = _asKey;
                _oInput.value = _asValue;
                _oNewWinForm.appendChild(_oInput);
            });
            _oNewWinForm.submit();
        }

搜索有说使用window.open会被浏览器给拦截，反正没有试过，将form的target属性设置为_blank，则会在新的窗口中进行post操作，因为预览和发布文章是一个form，所以决定预览的时候新建一个form窗口进行操作。

转载于:https://www.cnblogs.com/grj1046/p/4820195.html