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

2022-08-14 13:15:44

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>

3 总结

在实际ajax中执行时，必须保持点击按钮的时候执行新页面的函数new_window 与 ajax函数是同步的，不能将new_window 放在ajax的结果中执行，否则新页面窗口就会被浏览器拦截。

demo:https://files.cnblogs.com/files/xiaopanlyu/test_new_window.zip

码农公寓

1 问题描述

2 方法及问题

3 总结

相关文章