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实现避免浏览器拦截弹出新页面的方法的更多相关文章

  1. 模拟用户点击弹出新页面不会被浏览器拦截_javascript技巧

    原文:http://www.html5cn.com.cn/article/zxzx/3195.html 相信用过window.open的小伙伴们都遇到过被浏览器拦截导致页面无法弹出的情况:我们换下思路 ...

  2. javascript 关于弹出新页面始终在正中央方法

    记录一个关于弹出新页面始终在正中央方法 function openwindow(url, name, iWidth, iHeight) { var url;                       ...

  3. JS window对象 返回前一个浏览的页面 back()方法

    JS window对象 返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL. 语法: window.history.back();   返回前一个浏览的页面 back ...

  4. 解决Selenium弹出新页面无法定位元素问题（Unable to locate element）

    Python 2.7 IDE Pycharm 5.0.3 环境细节详见Python+Selenium+PIL+Tesseract真正自动识别验证码进行一键登录 对于同一页面无法定位元素问题请见姊妹篇解 ...

  5. JS window对象 返回前一个浏览的页面 back()方法，加载 history 列表中的前一个 URL。 语法： window.history.back();

    返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL. 语法: window.history.back(); 比如,返回前一个浏览的页面,代码如下: window.hi ...

  6. js 弹出新页面，避免被浏览器、ad拦截的一种办法

    以绑定click弹窗的方式,改为普通的链接,即 a[target=_blank],在点击打开新窗口之前,修改其href. 绑定mousedown,鼠标点击执行完成前修改href. 绑定focus,保证 ...

  7. JS实现单击按钮后弹出新的窗口页面

    点击按钮后,弹出指定大小的页面窗口. 效果图: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  8. js兼容多浏览器的关闭当前页面

    关闭当前页面,相信不少人在开发中都遇到过这个需求,但面对这么多的浏览器,要做到js的兼容还需要做特殊的处理.关于这方面网上有很多的资料,但大多都是复制粘贴的,没有达到兼容的效果,或者是效果不好. 下面 ...

  9. 火狐html5拖拽 弹出新页面解决办法

    今天做项目时,需要实现一个拖拽排序的功能,遂想到了html5的拖拽,便开始查资料,写代码.功夫不复有心人,通过网上资料作参考,排序功能成功实现.谷歌浏览器测试,拖拽平滑,无问题.火狐浏览器测试时,却无 ...

随机推荐

  1. DHCP分配固定IP

    https://www.cnblogs.com/liu1026/p/9829337.html 按照上面的操作实验好后在DHCP服务端的配置文件中加入

  2. 『编程题全队』alpha阶段项目复审

    小组的名字和链接 优点 缺点,bug 报告 最终名次 Gakki赛高 (1)支持注册账号和账号管理(2) 支持自动登录,提供便捷性(3)题目不重复且题目答案准确(4)支持排行榜统计功能(5)自己设计算 ...

  3. Yii 框架的Rbac [权限控制]

    转载自 xmlife 的博客 : http://blog.csdn.net/xmlife/article/details/50733451 1.首先我们要在配置文件的组件(component)里面配置 ...

  4. js数组去重五种方法

    今天来聊一聊JS数组去重的一些方法,包括一些网上看到的和自己总结的,总共5种方法(ES5). 第一种:遍历数组法 这种方法最简单最直观,也最容易理解,代码如下: var arr = [2, 8, 5, ...

  5. Luogu4768 NOI2018归程（最短路径+kruskal重构树）

    按海拔从大到小合并建出kruskal重构树,这样就能知道开车能到达哪些点,对这些点到1的最短路取min即可.最难的部分在于多组数据的初始化和数组大小的设置. #include<iostream& ...

  6. P2824 [HEOI2016/TJOI2016]排序

    题面 这是一道非常巧妙的线段树的题 我们会发现维护\(1 \sim n\)的序列非常困难,但如果我们维护\(01\)序列的的顺序,就非常容易了 但是我们怎么能把这道题变成维护\(01\)序列的顺序呢? ...

  7. bzoj 4448 [Scoi2015]情报传递 (树链剖分+主席树）

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=4448 题面: Description 奈特公司是一个巨大的情报公司,它有着庞大的情报网络 ...

  8. 【刷题】LOJ 6015 「网络流 24 题」星际转移

    题目描述 由于人类对自然资源的消耗,人们意识到大约在 2300 年之后,地球就不能再居住了.于是在月球上建立了新的绿地,以便在需要时移民.令人意想不到的是,2177 年冬由于未知的原因,地球环境发生了 ...

  9. 【Revit API】脱离中心文件

    话不多说,直接代码,整个过程不需要发起Transaction OpenOptions op = new OpenOptions(); op.Audit = true; //是否需要核查 op.Deta ...

  10. 【BZOJ1487】[HNOI2009]无归岛（动态规划）

    [BZOJ1487][HNOI2009]无归岛(动态规划) 题面 BZOJ 洛谷 题解 哪来的这么多废话啊,直接说一个仙人掌得了. 然后就是要你求仙人掌最大独立集了.(随便蒯份原来的代码就过了) 不过 ...