码迷,mamicode.com
首页 > Web开发 > 详细

浏览器拦截js打开新窗口

时间:2018-08-23 19:24:30      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:div   com   span   标题   数据   异步请求   解决方案   结果   javascrip   

通过javascript在浏览器新标签页或新窗口打开一个新的页面,结果被浏览器大大无情给拦截了

前端提交数据到后端,后端返回url,然后在新窗口打开该url(前后端数据请求使用异步请求的方式)

自己常用的两种打开新窗口的方式

  1. window.open()
  2. 用a标签的target="_blank"
    在模板中插入一个a标签,然后javascript去触发a链接的click,实现跳转。(该方法在jQuery跟js中有坑...)$(‘a‘).get(0)  注意这块!!!!
//***jQuery***
<a href="http://wuliv.com" id="openNew"></a>
$(function(){
  $(‘#openNew‘).click()
})
//失败无效
 
//***jQuery***
<a href="http://wuliv.com" id="openNew">
  <span><span>
</a>
$(function(){
  $(‘#openNew span‘).click()
})
//成功打开新页面
 
//***javascript***
<a href="http://wuliv.com" id="openNew"></a>
document.getElementById(‘openNew‘).click()
//成功打开新页面

  

使用jquery来触发a标签点击跳转时,需在a标签插入一个子标签,然后触发子标签的点击实现a标签的跳转(有点绕)

$("#openNew")得到的是一个jquery的对象,jquery本身对该对象的一些属性进行了封装,所以会导致click失效;而使用js对象 document.getElementById("a") 则不会存在该问题

onclick()也可以触发事件,但是onclick跟click不同;
onclick触发的是方法,而click先触发按钮的点击事件,再触发方法。
如果该对象没有绑定onclick方法则无法被触发,而click没有绑定方法也可以触发。

弹出新窗口失败的原因:

  1.使用window.open(),但是定义了窗口名,也就是在打开窗口传入name参数,因为window.open只能打开唯一的窗口名为name的窗口页面,如果同名,则无法打开。

  2.解决方案:window.open()不定义窗口名

  3.使用了异步请求,通过ajax向服务器请求数据,在请求完成后再打开新窗口。因为异步请求存在延时,浏览器会认为不是用户触发的操作。

  4.解决方案:

    2.1 ajax请求设置成同步的方式

    2.2如果使用了jQuery中的ajax方法做异步请求,则可以配置 async: false, 使请求方式变为同步。

    2.2 vue2.0采用的axios进行数据请求,axios没有同步请求的设置,都是异步的。

      在axios请求之前先打开一个空白的新窗口
         var newPage = window.open()  打开的空白页上有标题,显示的是“无标题”

      window.open(‘about:blank‘)  标题上显示的是‘about:blank‘

      接着在axios的then回调里写入要打开的url

      window.open(‘about:blank‘)

 

浏览器拦截js打开新窗口

标签:div   com   span   标题   数据   异步请求   解决方案   结果   javascrip   

原文地址:https://www.cnblogs.com/ws-zhangbo/p/9525339.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!