js实现避免浏览器拦截弹出新页面的方法

X.LYU 2024-10-27 13:31:43 原文

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的拖拽,便开始查资料,写代码.功夫不复有心人,通过网上资料作参考,排序功能成功实现.谷歌浏览器测试,拖拽平滑,无问题.火狐浏览器测试时,却无 ...

随机推荐

作业五：分析system_call中断处理过程
分析system_call中断处理过程一.MesuSO增加getpid和getpid-asm 二.使用GDB跟踪系统调用内核函数sys_getpid 分析system_call中断处理过程使用gd ...
HDU 2022 海选女主角
http://acm.hdu.edu.cn/showproblem.php?pid=2022 Problem Description potato老师虽然很喜欢教书,但是迫于生活压力,不得不想办法在业 ...
[转帖]VMware Vsphere 6.0安装部署（一）总体部署架构
(一)总体部署架构本教程用于学习目的,力求详尽的介绍安装部署过程和各组件之间的关系,部署过程从最简单的模型开始,系列文章按时间顺序依次展开,每篇介绍一个组件. 开始阶段,按照一台物理服务器,部署所有V ...
[转帖]Git数据存储的原理浅析
Git数据存储的原理浅析 https://segmentfault.com/a/1190000016320008 写作背景进来在闲暇的时间里在看一些关系P2P网络的拓扑发现的内容,重点关注了Ma ...
PHP操作Redis数据库常用方法
Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. Redis支持的数据类型有 Stirng(字符串), Lis ...
Jquery Cookie操作
// 写入 $.cookie('the_cookie','the_value');// 读取 $.cookie('the_cookie');// 删除 $.cookie('the_cookie',nu ...
win10 Jmeter下载安装与使用教程
1.下载 2.安装下载完成后解压文件(不需要安装) 之后需要配置jmeter环境变量 1)新增新增JMETER_HOME系统变量 2)编辑CLASSPATH变量,加上%JMETER_HOME%\li ...
MT【107】立体几何中用阿波罗尼乌斯圆的一道题
分析:利用内外圆知识知道,B,C两点到 AD 的距离$\le4$. 利用体积公式$V=\frac{1}{3}S_{截面}|AD|\le2\sqrt{15}$
【刷题】BZOJ 2125 最短路
Description 给一个N个点M条边的连通无向图,满足每条边最多属于一个环,有Q组询问,每次询问两点之间的最短路径. Input 输入的第一行包含三个整数,分别表示N和M和Q 下接M行,每行三个 ...
【题解】 Test 买水的ACX（套路）
题目描述: ACX在××信竞组学会信息竞赛,但是他的同学都很巨,于是要他去买水,结果来到某个买水的商店(奇奇怪怪的商店). 一天,ACX买了 N 个容量可以认为是无限大的瓶子,初始时每个瓶子里有 1 ...