js实现避免浏览器拦截弹出新页面的方法
1 问题描述
点击button按钮，提交页面的form表单，后台执行完毕后返回参数，前台页面需要该参数实现跳转，如何实现保留该原来的页面，并在浏览器选项卡新建一个页面，且不被浏览器拦截？
2 方法及问题
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
1）window.open()
在ajax的回调函数中调用window.open()实现会被浏览器拦截。
2）js模拟点击按钮事件
代码如下：
<html lang="utf-8">
<head>
<meta http-equiv="Content-type" Content ="text/html;"charset = "utf-8" >
</head>
<body>
<a id="alink" href="test" target="_blank" style="display: none"><span id="spanlink">test</span></a>
<input type="hidden" id="hdn_val" value="#">
<button type="button" onclick="submit()">打开新页面</button>
<script>
function new_window() {
while(1){
var o_a = document.getElementById('hdn_val');
var val=o_a.value;
if(val!="#"){
var a = document.getElementById('alink');
a.href=val;
var a = document.getElementById('spanlink');
a.click();
break;
}
}
}
function ajax_submit_cb(data){
var a = document.getElementById('hdn_val');
a.value=data;
}
function ajax_submit(){
//模拟ajax有延时,与实际仍有差别，浏览器会检测回调对象，判断是否是鼠标实际点击的按钮
var url='http://www.cnblogs.com/xiaopanlyu/';
setTimeout(ajax_submit_cb(url),3000);
}
function submit(){
ajax_submit();//该函数执行业务逻辑
new_window();
}
</script>
</body>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
3 总结
在实际ajax中执行时，必须保持点击按钮的时候 执行新页面的函数new_window 与 ajax函数是同步的，不能将new_window 放在ajax的结果中执行，否则新页面窗口就会被浏览器拦截。
demo:https://files.cnblogs.com/files/xiaopanlyu/test_new_window.zip
js实现避免浏览器拦截弹出新页面的方法的更多相关文章
- 模拟用户点击弹出新页面不会被浏览器拦截_javascript技巧
原文:http://www.html5cn.com.cn/article/zxzx/3195.html 相信用过window.open的小伙伴们都遇到过被浏览器拦截导致页面无法弹出的情况:我们换下思路 ...
- javascript 关于弹出新页面始终在正中央方法
记录一个关于弹出新页面始终在正中央方法 function openwindow(url, name, iWidth, iHeight) { var url; ...
- JS window对象 返回前一个浏览的页面 back()方法
JS window对象 返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL. 语法: window.history.back(); 返回前一个浏览的页面 back ...
- 解决Selenium弹出新页面无法定位元素问题（Unable to locate element）
Python 2.7 IDE Pycharm 5.0.3 环境细节详见Python+Selenium+PIL+Tesseract真正自动识别验证码进行一键登录 对于同一页面无法定位元素问题请见姊妹篇解 ...
- JS window对象 返回前一个浏览的页面 back()方法，加载 history 列表中的前一个 URL。 语法： window.history.back();
返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL. 语法: window.history.back(); 比如,返回前一个浏览的页面,代码如下: window.hi ...
- js 弹出新页面，避免被浏览器、ad拦截的一种办法
以绑定click弹窗的方式,改为普通的链接,即 a[target=_blank],在点击打开新窗口之前,修改其href. 绑定mousedown,鼠标点击执行完成前修改href. 绑定focus,保证 ...
- JS实现单击按钮后弹出新的窗口页面
点击按钮后,弹出指定大小的页面窗口. 效果图: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- js兼容多浏览器的关闭当前页面
关闭当前页面,相信不少人在开发中都遇到过这个需求,但面对这么多的浏览器,要做到js的兼容还需要做特殊的处理.关于这方面网上有很多的资料,但大多都是复制粘贴的,没有达到兼容的效果,或者是效果不好. 下面 ...
- 火狐html5拖拽 弹出新页面解决办法
今天做项目时,需要实现一个拖拽排序的功能,遂想到了html5的拖拽,便开始查资料,写代码.功夫不复有心人,通过网上资料作参考,排序功能成功实现.谷歌浏览器测试,拖拽平滑,无问题.火狐浏览器测试时,却无 ...
随机推荐
- 《Linux内核分析》第二周学习报告
<Linux内核分析>第二周学习报告 ——操作系统是如何工作的 姓名:王玮怡 学号:20135116 第一节 函数调用堆栈 一.三个法宝 二.深入理解函数调用堆栈 三.参数传递与局部变量 ...
- 课堂讨论——Alpha版总结会议
我们在课堂上针对第一阶段冲刺过程中存在的问题,展开了激烈的讨论,并投票选出需要改进的最主要三个问题.
- 第二个Sprint冲刺第三天（燃尽图）
- 第二个spring冲刺第8天
今天我们团队分别安排了不同的任务,分别是1人程序编写,1人检查bug,1人负责客户体验,还有我们的总负责人王俊凯同学负责各个部分的协调.今天程序有了新的调整,但是功能还是没有完全做出来,不过还在开发途 ...
- Java的4种保留4位小数的方法(转)
上网查到的4种方法 其实刚学java……谁知道java里面的这么多方法啊……java里面重要的包本来就不少啊 ……跟我学粤语的小徒弟问我的东东…… 写两种方式……直接在main函数里面写的.还有就是利 ...
- 虚拟主机修改上传配置（PHP）
虚拟主机中不允许修改php.ini 配置文件(当然有的允许修改,则修改php.ini,因为有时候在线上通过.htaccess 修改了也没有作用),只能通过ini_set() 或重写文件.htacces ...
- 关于“Scrum敏捷项目管理”
此次关于“Scrum”的名词解析,主要目的是为我们的“OneZero”团队确定项目开发的模式. http://www.cnblogs.com/taven/archive/2010/10/17/1853 ...
- spirngcloud文件
https://blog.csdn.net/liumiaocn/article/details/54309866
- react & monaco editor & vs code
react & monaco editor & vs code monaco-editor https://microsoft.github.io/monaco-editor/inde ...
- （转）C# Aop简单扫盲及ORM实体类属性拦截示例
转自: http://www.cnblogs.com/cyq1162/archive/2012/05/30/2526573.html 先说下场景,C#中为什么要使用Aop,而我又是在哪里使用Aop? ...