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

这个不难实现 <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. WPF 手机验证码 发送按钮倒计时 代码

    private async void SendButton_Click(object sender, RoutedEventArgs e) { var button = sender as Butto ...

  2. Java集合 -- ArrayList集合及应用

    JAVA集合 对象数组 集合类之ArrayList 学生管理系统 斗地主案例 NO.one 对象数组 1.1 对象数组描述 A:基本类型的数组:存储的元素为基本类型 int[] arr={1,2,3, ...

  3. FastDFS部署安装全过程

    你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:https://pushy.site/posts/153205 ...

  4. ShortcutBadger添加桌面角标(Badge)

    1.简介:角标原本是苹果的ios中的东西,android原生并不支持角标,因为google的意思是让大家用notification(提示栏)即可,不过无妨,厉害的android第三方厂商可以通过在自定 ...

  5. 解决国外模板h1、h2、h3...不显示中文文章标题的问题

    如果你经常用国外好看的网页模版时候,会遇到不显示中文文章标题的情况,显示英文标题却正常.遇到这个情况很多人认为应该修改CSS的font-family的字体,其实这是错误的,与CSS无关. 出现这种情况 ...

  6. voltdb数据库持久性,扩展集群

    之前在git上下载的voltdb,以及在官网下载的社区版voltdb均不支持持久性事务,和扩展集群,今天下载了企业试用版voltdb,安装过程不再赘述,记录一下我的使用过程 持久性测试 以前的 vol ...

  7. 4 个用于构建优秀的命令行用户界面的 Python 库

    作者: Amjith Ramanujam 译者: LCTT Lv Feng 在这个分为两篇的关于具有绝佳命令行界面的终端程序的系列文章的第二篇教程中,我们将讨论 Prompt.Toolkit.Clic ...

  8. aws rhel 7 安装GUI ,配置VNC

    预计阅读时间:15分钟 预计配置时间:30分钟  (前提是已经申请AWS的EC2的rhel7 云主机并且成功运行) 目前AWS 亚马逊云免费试用一年,申请一个学习使用 痛点:没有GUI,无法搭建Jen ...

  9. django的admin后台注册model并显示

    在admin后台注册model并显示其他字段: 修改app下的admin.py,注册model: from .models import vmadmin.site.register(vm) #注册名为 ...

  10. CSS学习摘要-语法和选择器

    主要摘自网络开发者. 从最基本的层次来看,CSS是由两块内容组合而成的: 属性(Property):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等. 属性值(V ...