window.open 跳转页面打开新标签 模拟单击

打开新窗口:无异步

// 直接打开新窗口并导航到指定的URL
let windowObjectReference = window.open();
windowObjectReference.location.href = 'https://www.baidu.com';

打开新窗口:有异步

// 在HTML中创建一个隐藏的按钮
<button id="codeUrl" @click="goPayUrl" class="dn"></button>

// 使用setTimeout模拟异步操作,并触发按钮的点击事件
setTimeout(() => {
  let sub = document.getElementById('codeUrl');
  sub.click();
}, 100);

// 点击按钮时的处理函数,打开新窗口并导航到指定的URL
function goPayUrl() {
  let windowObjectReference = window.open();
  windowObjectReference.location.href = globeData.codeUrl;
}

Safari中window.open问题的分析

// 简述问题背景和原因
在调移动支付问题的时候遇到过,用window.open打开一个微信支付链接,唤醒移动支付,在IOS下死活唤醒不了...
原因是Safari的安全机制将其阻挡。

// 提供的解决方案
解决办法有4种:
1. 用window.location.replace()来替代
2. 苹果系统设置,偏好设置->安全性,去掉阻止弹窗的复选框就ok了
3. 在回到函数中生成一个链接,让用户再次点击下
4. 在回调代码之前打开一个空窗口,例如 var w=window.open(xxx); 然后在回调函数中设置它的location。

根据设备类型选择打开方式

// 获取用户代理字符串并判断设备类型
let u = navigator.userAgent;
let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; // Android终端
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // iOS终端

// 根据设备类型选择适当的打开方式
if (isAndroid) {
  // Android终端
  window.open(url);
} else if (isiOS) {
  // iOS终端
  window.location.href = url;
}

使用回调打开新窗口

// 定义打开新窗口的函数
var openWin = function(){
  let windowObjectReference = window.open();
  $.ajax({
    type: '',
    url: '',
    data: '',
    // ...其他ajax参数...
    success: function(json){
      windowObjectReference.location.href = 'https://www.baidu.com';
    }
  });
};

posted on 2021-09-16 16:04  完美前端  阅读(911)  评论(0)    收藏  举报

导航