zoukankan      html  css  js  c++  java
  • 点击事件弹出新的页面

      前两天将文本与测听功能的模块抽取到独立页面,出现了bug,页面本身没问题,主要是双击通话列表加密数据后异步跳转到2页面出现的问题。新窗口会被拦截掉,吐槽一下,为什么js中使用 window.open() 打开新的页面要被拦截,有什么关系!

      之前是用angular做的单页面应用,通过路由跳转,所以没有此问题,抽出来后发现了这个问题,会自动拦截,除非手动进行设置不拦截新弹出窗口,否则逃不掉拦截TOT。

      查了好多方法,什么模拟表单提交跳转,创建a标签跳转等,花样是挺多,可是都没什么用,该被拦截还被拦截,而且我还想说,百度出的页面60%的内容都是一样的。。。可不可以人性化一点,雷同的就判断时间扔掉算了。抄袭可耻!

      这里整理一下打开新页面知识点,虽然会被拦截,但单页面应用依然可以用到。

    js自带window.open():

    window.open(url, '_self');//本窗口打开
    window.open(url, '_blank');//新窗口打开
    //第二参数可省,默认新窗口打卡
    //还有一种打开新页面,重给地址的方法
     var openWin = window.open();
     openWin.location = url;
    var w = window.open();
    $.get(url, function (data) {
        w.location.href = url;
    })

    使用a标签,调用其点击方法:

    var a = "<a href='" + url + "' target='_blank' >jump</a>";
    $("body").append(a);
    var btn = $(a).get(0);
    var e = document.createEvent('MouseEvents');
    e.initEvent('click', true, true);
    btn.dispatchEvent(e);
    var a = document.createElement("a");
    a.setAttribute("href", url);
    a.setAttribute("target", "_blank");
    a.setAttribute("id", "openwin");
    document.body.appendChild(a);
    a.click();
    var a = '<a id="openWin" href=' + url + '></a>';
    $('body').append(a);
    $('#openWin').click();

    使用表单提交,跳转到新页面:

    var tempForm = '<form method="get" ' +
                    'target="_blank" ' +
                    'action="' + url + '">' +
                    '<input type="hidden" name="id" value="' +
                    value + '">'  + '</form>';    
    var $tempForm = $(tempForm);
    $("body").append($tempForm);
    $tempForm.submit();
    $tempForm.remove();

    后期遇到会继续添加,方法很多,但是都没有解决跳转弹出新页面问题,我只能感叹,浏览器才是最强的。

    加一句:异步请求后打开新页面是不行的,所以可以使用同步请求方式直接打开页面。

    附上大神回复:

    这样就能直接进行各种新页面打开啦!

  • 相关阅读:
    Oracle创建表空间、创建用户以及授权
    Oracle数据库安装图文操作步骤
    Oracle 11g数据库详细安装步骤图解
    Java 开发环境配置--eclipse工具进行java开发
    ExtJs常用布局--layout详解(含实例)
    HTTPS-HTTPS原理
    JavaScript: JavaScript的简介和入门代码演示
    HTML: 仿写一个财经类静态的网页
    CSS:仿写博客园写一个静态网页
    CSS:CSS定位和浮动
  • 原文地址:https://www.cnblogs.com/guofan/p/6559614.html
Copyright © 2011-2022 走看看