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. 【Alpha】第三次Scrum meeting

    今日任务一览: 导航栏诞生 前期准备的Latex文本将撰写完毕 生成燃尽图的问题已经解决 姓名 今日完成任务 所耗时间 刘乾 用Github成功生成了燃尽图(真是不容易啊...),与架构师继续每日面基 ...

  2. Linux内核分析 一二章读书笔记

    第一章 Linux内核简介 1.Unix (1)Unix系统很简洁 (2)在Unix中,所以东西都被当作文件对待,通过一套相同的系统调用接口来进行:open(),read(),write(),lsee ...

  3. What is the difference between WinRT, UWP and WPF?

    在学习UWP的过程中确实有这个迷惑,在此分享一下. UWP (Universal Windows platform), Metro and WinRT are all result of Micros ...

  4. （第三周）c#程序理解

    阅读下面程序,请回答如下问题: 问题1:这个程序要找的是符合什么条件的数? 问题2:这样的数存在么?符合这一条件的最小的数是什么? 问题3:在电脑上运行这一程序,你估计多长时间才能输出第一个结果?时间 ...

  5. 『编程题全队』Beta 阶段冲刺博客集合

    『编程题全队』Beta 阶段冲刺博客集合 »敏捷冲刺 日期:2018.5.23 博客连接:『编程题全队』Scrum 冲刺博客 »Day1 日期:2018.5.23 博客连接:『编程题全队』Beta 阶 ...

  6. Kafka与Logstash的数据采集对接

    Logstash工作原理 由于Kafka采用解耦的设计思想,并非原始的发布订阅,生产者负责产生消息,直接推送给消费者.而是在中间加入持久化层--broker,生产者把数据存放在broker中,消费者从 ...

  7. 【HTML5】中的一些新标签

    1.element.classList 获取该元素的所有类名,并以数组方式列出. 增加类名:element.classList.add(class1,class2); //可添加一个或多个. 去除类名 ...

  8. suse11/12关闭防火墙

    suse11关闭操作为:service SuSEfirewall2_setup stopservice SuSEfirewall2_init  stop 取消开机启动防火墙:chkconfig SuS ...

  9. SSH协议详解

    简介 SSH只是一个协议,基于这个协议有不同的实现,这些实现中有开源,也有收费. 原理 普通网络通信一般是明文通信,数据容易被中间人拦截并且解析,而SSH协议则提供了基于内容加密服务. 流程: 第一种 ...

  10. catch/finally中不应使用 writer.flush()

    在开发中遇到了一个问题,关闭流的时候会出现某种莫名其妙的错误.后来一个巧合看到了这个解决方法. 先看问题(知道答案以后,才知道是这里出错了) FileWriter writer = null; Str ...