最近做项目,有个需求是,点击跳转跳转,跳转需要访问后台是否可以跳转
跳转功能呢通过ajax异步请求完成,最开始的想法是在异步获得返回成功后,直接用window.open(URL)打开目的窗口,遇到了新标签页被浏览器拦截的情况;
- $.ajax({
- type: 'get',
- dataType: 'jsonp',
- crossDomain: true,
- jsonp: 'xxxxx',
- url:'xxxxxxxxxx',
- success: function (data) {
- //此处悬浮窗弹出
- window.open(URL)
- }
- })
在click事件时开启一个新的空窗口,然后异步请求到信息后将该窗口的location改变,该方法不合适的地方是,浏览器默认会立即跳转到空窗口,弹出悬浮窗在父窗口,无法被用户看到
- BTN.click(function () {
- var mywin = window.open();
- $.ajax({
- type: 'get',
- dataType: 'jsonp',
- crossDomain: true,
- jsonp: 'apicb',
- url:'',
- success: function (data) {
- //此处父页面悬浮窗弹出不能被看到
- mywin.location.href = URL; } })});
出现被拦截情况的原因主要在于,浏览器不允许,非用户行为的窗口打开方式,所以必须通过点击事件来触发URL打开,所以采取了下面的解决办法:
函数封装:先创建个跳转的a元素,模拟发送click请求后将该元素从文档中删除;
- BTN.click(function () {
- $.ajax({
- success: function() {
- //1展示悬浮窗
- //2打开新窗口
- setTimeout(function () {
- openWin('http://www.baidu.com');
- },2000);
- }
- })
- });
- function openWin(url) {
- $('body').append($('<a href="'+url+'" target="_blank" id="openWin"></a>'))
- document.getElementById("openWin").click();//点击事件
- $('#openWin').remove();
- }
本来测试后发现没有问题,发布到服务器后浏览器继续拦截,奔溃边缘。。
只能先用window.open打开一个窗口,然后ajax返回值后修改该窗口地址
var tempwindow=window.open();
tempwindow.location='http://www.baidu.com';
tempwindow.close();
新开页面马上关闭,切换会导致感觉屏幕闪了一下,不过不注意是看不到的
亲测 Google、Firefox、IE可用 (测试时间:2018-03-16)
转载地址:http://blog.csdn.net/u011209223/article/details/77742806