JS form跳转到新标签页并用post传参
今天在开发的过程中有一个需求,要求:打开一个新的页面同时传参。
这个不难实现 <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¶m2=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);
}
【参考】
- https://www.runoob.com/jsref/met-win-open.html
- https://blog.csdn.net/u013303551/article/details/52909871
JS form跳转到新标签页并用post传参的更多相关文章
- 如何设置使chrome新标签页中打开链接自动跳转到新标签页?
在新标签打开链接的时候这样点选 Ctrl+左键 或者 鼠标中键 或者 右键链接选择'新标签页中打开链接', 可实现出现新标签页但不自动跳转 但是这个有问题, 即, 新标签只是在背景打开, 操作后并不会 ...
- FireFox新标签页打开搜索和书签
FireFox更新,发现界面完全不适应,虽然他是越做越丑,但是也没办法,一直用FireFox,许多书签,保存的密码现在都记不住了,只能靠保存的自动填充.... 进入正题,FireFox更新了之后,搜索 ...
- 阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
问题:ios封装完之后,点击里边的按钮会跳转到网页上 ——小卡遇到这个问题就是这样解决的↓↓↓ 解决方法:建议将代码放到</head>标签前,当然,另外存为一个js 文件引用也是可以的呦~ ...
- js实现在新标签页打开页面
这种方法打开新标签页要在IE9+以上浏览器才可以! <html> <head> <meta http-equiv="Content-type" con ...
- 【解决方案】chrome打开新标签页自动打开chrome://newtab并且跳转到谷歌香港
简述天,昨天开始遇到这个问题,还没有留心,结果今天多次使用chrome的时候,就发现有些不对了..打开chrome的新标签页,结果出现了自动跳转的问题我自动跳转的是下面这个网页:https://www ...
- 每天一点产品思考(5):Web端链接跳转在当前页面刷新还是新标签页打开?
一.与交互设计师的突然撕逼 今天阿白在验收产品的时候,在博客首页打开一篇博文,是在原先的页面进行刷新,而不是新开一个标签页打开.阿白让开发改成在新标签页中打开,但是开发说这是设计师设计 ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- HTML:模拟链接被按下,在新标签页打开页面,不使用window.open(可能被拦截)
当按下一个按钮时,想打开一个新的标签页,可以使用window.open去实现但是因为使用window.open在新窗口或者新标签页中打开页面,有可能被浏览器给拦截.为了解决这个问题,可以模拟链接被按下 ...
- (转载)HTML:模拟链接被按下,在新标签页打开页面,不使用window.open(可能被拦截)
原文: http://www.cppblog.com/biao/archive/2010/08/21/124196.html 当按下一个按钮时,想打开一个新的标签页,可以使用window.open去实 ...
随机推荐
- C语言各类型大小,结构体大小 sizeof(struct A)
C语言类型大小总览 编译器pack指令 #pragma pack(n)——定义n字节对齐 C++固有类型的对齐取编译器对齐与自身大小中较小的一个 32位C++默认8字节对齐.gcc编译器默认4字节对齐 ...
- SLAM会被深度学习方法取代吗?
日益感觉到自己对深度学习的理解比较肤浅,这段且当做是以前的认识. 上上周去围观了泡泡机器人和AR酱联合举办的论坛.在圆桌阶段,章国峰老师提了一个问题:SLAM会被深度学习方法取代吗?这是一个很有趣的话 ...
- 【Android】Retrofit 2.0 的使用
一.概述 Retrofit是Square公司开发的一个类型安全的Java和Android 的REST客户端库.来自官网的介绍: A type-safe HTTP client for Android ...
- vue使用百度地图
1.在百度地图申请密钥:http://lbsyun.baidu.com/ 将 <script type="text/javascript" src="http:// ...
- the cause of StringBuild class
如果我们对字符串进行拼接操作,每次拼接,都会创建一个新的String对象,既耗时,又浪费空间,而StringBuild类可以解决这个问题. 那么StringBuild类是如果解决的呢? 因为Strin ...
- java变量常量
1. java 变量遵循先声明,再赋值,后使用的原则. 一个变量可以只声明,不赋值,没有问题(只是这个变量没有实际意义,但完全没有问题).但如果想要使用它,那么就一定要给它赋值,而大多数时候我们又不知 ...
- Storm监控文件夹变化 统计文件单词数量
监控指定文件夹,读取文件(新文件动态读取)里的内容,统计单词的数量. FileSpout.java,监控文件夹,读取新文件内容 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
- Ubuntu 16.04 c++ Google框架单元测试
环境:Ubuntu 16.04 在github网站上下载gtest框架:终端输入git clone https://github.com/google/googletest.git 然后找到 gool ...
- JWT能够干什么,不应该干什么?
http://cryto.net/~joepie91/blog/2016/06/13/stop-using-jwt-for-sessions/ At the start of this article ...
- Oracle EBS 请求
SELECT t.responsibility_id, t.responsibility_key, t.responsibility_name, t.description, t.menu_id, f ...