zoukankan      html  css  js  c++  java
  • js实现避免浏览器拦截弹出新页面的方法

    1 问题描述

    点击button按钮,提交页面的form表单,后台执行完毕后返回参数,前台页面需要该参数实现跳转,如何实现保留该原来的页面,并在浏览器选项卡新建一个页面,且不被浏览器拦截?

    2 方法及问题

    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

  • 相关阅读:
    Selenium学习:鼠标事件
    Selenium学习:新窗口打开链接,并定位到新窗口
    Selenium学习:get_attribute()方法获取列表元素信息
    Java 基础(接口二)
    Java 基础(接口一)
    Java 练习(模板方法设计模式TemplateMethod)
    Java 基础(多态的应用:模板方法设计模式TemplateMethod)
    Java 基础(抽象类的匿名子类)
    Java 练习(抽象类与抽象方法)
    Java 基础( final 关键字)
  • 原文地址:https://www.cnblogs.com/xiaopanlyu/p/8299351.html
Copyright © 2011-2022 走看看