使用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窗口进行操作。

posted @ 2015-09-18 19:34  nil  阅读(362)  评论(0编辑  收藏  举报