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

然后想到了写邮件时候的新窗口预览,查了下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窗口进行操作。

使用js在新窗口中POST数据的更多相关文章

  1. 优秀前端工程师必备: 我要一个新窗口: js开新窗的2种姿势

    1.<a href="https://www.cnblogs.com/" title="博客园">当前页面打开博客园</a> js代码等 ...

  2. 【转载】解决window.showModalDialog 模态窗口中location 打开新窗口问题

    来源: <http://bibipear.blog.sohu.com/143449988.html> 在我们的项目中,通常会用到showModalDialog 打开一个模态的子窗口,但是在 ...

  3. js打开新的链接

    当前页面打开一个链接:window.location="URL" 打开一个新的页面,再打开一个新的链接:window.open(URL,窗口名称,窗口风格) window对象具有如 ...

  4. 关于iframe和div窗口中ajax请求200状态时执行的回调问题

    上一篇说了在ajax回调里面处理iframe窗口的刷新问题,这一篇记录一下遇到的一个分别在iframe和div窗口中ajax请求200状态时执行的回调问题. 我们先来看一下ajax请求的写法(这里使用 ...

  5. Ext JS 4 新特性2:配置项属性(config)之一

    Ext JS 4 新特征2:配置项属性config 最新版本的Ext JS 4.2的另外一个伟大的新特征就是增加了configuration配置项属性,当我们在创建一个新类的时候,经常性的要设置某某属 ...

  6. Ext JS 6 新特性和工具

    Ext JS 6 新特性和工具 Ext JS 6 带来很多新特性.工具和改进.以下是一些亮点: • 合并了 Ext JS & Sencha Touch - 在 Ext 6, 你可以访问 Ext ...

  7. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  8. js怎样得出数组中某个数据最大连续出现的次数

     1:js怎样得出数组中某个数据最大连续出现的次数 var test=[1,2,3,3,2,2,2,3,3,3,3,5,3,3,3,3,3] ;    var j  = 0 ;    var max  ...

  9. js 打开新窗口方式

    之前的项目,有个功能是下载文件,这里只要在浏览器输入 url 就会下载那个文件了.当时我只是简单得使用 window.open ,但是却会被浏览器进行拦截,要手动开启才行,然后就搜索研究其他方法,就看 ...

随机推荐

  1. EBS并发管理器请求汇总(按照并发消耗时间,等待时间,平均等待事件等汇总)

    此数据集用于确定正在使用中并发管理器,并可与实际的在启动时分配的并发管理器.而且考虑完成状态为 正常/警告 的请求. select q.concurrent_queue_name, count(*) ...

  2. 用XAML做网页!!—边栏与页脚

    原文:用XAML做网页!!-边栏与页脚 此次我们来设计边栏和页脚,首先从页脚开始,其代码很简单: <Border x:Name="Footer" BorderBrush=&q ...

  3. 每个线程分配一个stack,每个进程分配一个heap;heap没有结构,因此寻址慢(转)

    学习编程的时候,经常会看到stack这个词,它的中文名字叫做"栈". 理解这个概念,对于理解程序的运行至关重要.容易混淆的是,这个词其实有三种含义,适用于不同的场合,必须加以区分. ...

  4. U11认识与学习bash

    1.使用命令clear来清除界面. 2.命令别名设置alias和unalias: 例如: alias lm='ls -l | more' 查看当前的别名设置有哪些: alias unalias lm ...

  5. SQLServer2012 分页语句执行分析

    上一篇文章提到了,SQLServer2012在使用Offset,Fetch语句分页时,获取了大量不需要的数据,导致查询效率低的问题. 现在让我们来看看,究竟是什么导致SQLServer不能按需取数呢? ...

  6. 最简单的Java框架

    框架framework的目的是定义骨架式方案,处理各种相同的底层细节:而开发人员使用框架时,能够依照自己的需求实现自己的功能--仅仅须要填入自己的东西/flesh. 最简单的框架,类似于JUnit,它 ...

  7. mmc生产任务分配问题

    mmc生产任务分配问题,本题目简单.

  8. windows phone (14) 简单了解Ellipse元素和Rectangle元素

    原文:windows phone (14) 简单了解Ellipse元素和Rectangle元素  System.Windows.Shapes命名空间中包含了显示矢量图形的元素分别为ellipse和re ...

  9. 认为C/C++很难理解、找工作面试笔试,快看看这本书!

    假设你是C/C++谁刚开始学习,看这本书.因为也许你读其他的书还不如不看.一定要选择一本好书. 假设你正在准备工作,请认真看这本书,由于这本书会教会你工作中必备的知识,相信你即将面临的语法类题目不会超 ...

  10. 我的CSDN之路

    经营CSDN博客刚满一年,能够说CSDN给我们带来了非常大的帮助,这一年里CSDN见证了我们的成长.以下两篇博客就是我这一年在CSDN的缩影. 这篇是我一年前写的,那时候刚申请CSDN不久:http: ...