今天在开发的过程中有一个需求,要求:打开一个新的页面同时传参

这个不难实现 <a> 标签 就可以实现,但它却是使用 get方式传参,这种直接将参数拼接在 url 的方式(url + ? + 参数)是不安全的,数据直接暴露在地址栏,而且由于不同的浏览器对于地址栏的长度也有限制,导致参数也是有大小限制的。那么能不能使用 post方式传参呢?  下面就来介绍各种打开新页面以及传参的方式。

1 超链接<a>标签  (get传参)

   <a href="http://www.cnblogs.com/pan1042/" target="_blank">

2 window.open()  (get传参)

  window.open(URL,name,specs,replace)

   例: window.open(url + "? param1=value1&param2=value2", "_blank")

3 form  (post传参)

function openPostWindow(url, data, name)
{
var tempForm = document.createElement("form");
tempForm.id = "tempForm1";
tempForm.method = "post";
tempForm.action = url;
tempForm.target = name; // _blank - URL加载到一个新的窗口 var hideInput = document.createElement("input");
hideInput.type = "hidden";
hideInput.name = "content";
hideInput.value = data;
tempForm.appendChild(hideInput);
// 可以传多个参数
/* var nextHideInput = document.createElement("input");
nextHideInput.type = "hidden";
nextHideInput.name = "content";
nextHideInput.value = data;
tempForm.appendChild(nextHideInput); */
if(document.all){ // 兼容不同浏览器
tempForm.attachEvent("onsubmit",function(){}); //IE
}else{
tempForm.addEventListener("submit",function(){},false); //firefox
}
document.body.appendChild(tempForm);
if(document.all){ // 兼容不同浏览器
tempForm.fireEvent("onsubmit");
}else{
tempForm.dispatchEvent(new Event("submit"));
}
tempForm.submit();
document.body.removeChild(tempForm);
}

【参考】

  1. https://www.runoob.com/jsref/met-win-open.html  
  2. https://blog.csdn.net/u013303551/article/details/52909871

JS form跳转到新标签页并用post传参的更多相关文章

  1. 如何设置使chrome新标签页中打开链接自动跳转到新标签页?

    在新标签打开链接的时候这样点选 Ctrl+左键 或者 鼠标中键 或者 右键链接选择'新标签页中打开链接', 可实现出现新标签页但不自动跳转 但是这个有问题, 即, 新标签只是在背景打开, 操作后并不会 ...

  2. FireFox新标签页打开搜索和书签

    FireFox更新,发现界面完全不适应,虽然他是越做越丑,但是也没办法,一直用FireFox,许多书签,保存的密码现在都记不住了,只能靠保存的自动填充.... 进入正题,FireFox更新了之后,搜索 ...

  3. 阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页

    问题:ios封装完之后,点击里边的按钮会跳转到网页上 ——小卡遇到这个问题就是这样解决的↓↓↓ 解决方法:建议将代码放到</head>标签前,当然,另外存为一个js 文件引用也是可以的呦~ ...

  4. js实现在新标签页打开页面

    这种方法打开新标签页要在IE9+以上浏览器才可以! <html> <head> <meta http-equiv="Content-type" con ...

  5. 【解决方案】chrome打开新标签页自动打开chrome://newtab并且跳转到谷歌香港

    简述天,昨天开始遇到这个问题,还没有留心,结果今天多次使用chrome的时候,就发现有些不对了..打开chrome的新标签页,结果出现了自动跳转的问题我自动跳转的是下面这个网页:https://www ...

  6. 每天一点产品思考(5):Web端链接跳转在当前页面刷新还是新标签页打开?

    一.与交互设计师的突然撕逼         今天阿白在验收产品的时候,在博客首页打开一篇博文,是在原先的页面进行刷新,而不是新开一个标签页打开.阿白让开发改成在新标签页中打开,但是开发说这是设计师设计 ...

  7. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  8. HTML:模拟链接被按下,在新标签页打开页面,不使用window.open(可能被拦截)

    当按下一个按钮时,想打开一个新的标签页,可以使用window.open去实现但是因为使用window.open在新窗口或者新标签页中打开页面,有可能被浏览器给拦截.为了解决这个问题,可以模拟链接被按下 ...

  9. (转载)HTML:模拟链接被按下,在新标签页打开页面,不使用window.open(可能被拦截)

    原文: http://www.cppblog.com/biao/archive/2010/08/21/124196.html 当按下一个按钮时,想打开一个新的标签页,可以使用window.open去实 ...

随机推荐

  1. GDAL线面互转换(2)

    在上一个文章中介绍了线转化为面和面转化为线,其主要的实现思路就是把面中的点取出来构成线,把线中的点取出来构成面,实际上就是一个硬拷贝,无奈客户的实际需求并非如此,客户想要线转面的时候几条相交线构成面, ...

  2. 优雅的实现多类型列表的Adapter

    1引言 在开发中经常会遇到,一个列表(RecyclerView)中有多种布局类型的情况.前段时间,看到了这篇文章 [译]关于 Android Adapter,你的实现方式可能一直都有问题(http:/ ...

  3. exim CVE-2017-16943 uaf漏洞分析

    前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 这是最近爆出来的 exim 的一个 uaf 漏洞,可以进行远程代码 ...

  4. 网络 私有IP和子网掩码设置

    私有IP不需要花钱 节约使用公网IP有两个方法,一个方法是动态IP(关机回收IP),一个方法是私有IP,尤其是私有IP作用巨大. 私有IP不具有唯一性,不能直接访问公网.比如,我以私有IP192.16 ...

  5. 外业数据采集平台(GPS+Android Studio+Arcgis for android 100.2.1)

    外业数据采集平台 1. 综述 在室外,通过平板或者手机接收GPS坐标,实时绘制点.线.面数据,以便为后续进行海域监测.土地确权.地图绘图提供有效数据和依据. 2. 技术路线 Android studi ...

  6. redis介绍(7)高级用法

    redis的过期策略以及内存淘汰机制 分析:这个问题其实相当重要,到底redis有没用到家,这个问题就可以看出来.比如你redis只能存5G数据,可是你写了10G,那会删5G的数据.怎么删的,这个问题 ...

  7. Week7——JSON

    1.什么是JSON? JSON是JavaScript对象表示法,全称是JavaScript Objec Notation.它是存储和交换文本信息的语法,类似于XML.JSON是轻量级的文本数据交换格式 ...

  8. 关于C#线程,线程池和并行运算的简单使用和对比

    转自:https://www.cnblogs.com/jeffwongishandsome/archive/2010/11/12/1876137.html 先大概看一下控制台应用程序的Main方法的主 ...

  9. 【Oracle】存储过程写法小例子

    1.存储过程的基本语法: CREATE OR REPLACE PROCEDURE 存储过程名(param1 in type,param2 out type) IS 变量1 类型(值范围); 变量2 类 ...

  10. mysql-sql-standard

    https://github.com/zhishutech/mysql-sql-standard