使用js在新窗口中POST数据

时间：2023-03-10 04:01:42
使用js在新窗口中POST数据

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

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

		/*

		* 在新窗口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窗口进行操作。

相关文章