iOS Safari中移动应用无法打开新标签页的解决方案

前言

通过网页的配置文件实现的iPhone移动应用无法调用js代码打开新标签页

问题复现

// #ifdef H5
	window.open(url, '_blank'); 
// #endif

通过js的windos.open函数打开新标签页
但是却没有反应
其他的windows系统的浏览器或者安卓的网页都可以正常打开新标签页

• 通过搜索相关信息得知：

在 iOS 的 Safari 浏览器中，window.open() 方法的行为与在桌面浏览器（如 Chrome、Firefox 或 Safari 桌面版）中有所不同，这主要是因为 iOS 的安全策略和用户体验设计。
对于 window.open(url, '_blank') 这样的调用，在 iOS 的 Safari 浏览器中，默认情况下，如果页面是在用户交互（如点击事件）的上下文中调用的，它通常会尝试打开一个新的浏览器窗口或标签页来加载指定的 URL。然而，iOS 可能会阻止这种弹出窗口的自动显示，特别是如果它看起来像是未经用户明确请求的弹出广告。
在浏览器环境中，window.open()和<a target="_blank">的行为可能会受到用户浏览器设置的影响，如弹出窗口阻止器等。

总结：
1.iOS的Safari浏览器可能会拦截不安全的跳转或者弹窗
2.可能是用户配置的安全策略或者广告拦截的问题

解决方案

1. window.location.href 会替换当前页面的URL，并在当前浏览器标签页中加载新的URL
2. 利用请求头的UserAgent信息判断该用户是否在iPhone的safari浏览器中发起请求并判断。
3. 如果是在特定浏览器发起请求则可以在当前页跳转url

代码

// #ifdef H5
if (this.isIPhone === true){
	window.location.href = url; 
} else{
	window.open(url, '_blank'); 
}

判断函数

detectDevice() {  
      const userAgent = navigator.userAgent.toLowerCase(); // 转换为小写以忽略大小写差异  
      if (userAgent.includes('iphone')) {  
        this.isIPhone = true;  
      }  
    },

我们首先通过navigator.userAgent获取当前浏览器的UserAgent字符串，并将其转换为小写（toLowerCase()），以便在检测时忽略大小写差异。然后，我们使用includes('iphone')来检查UserAgent字符串中是否包含"iphone"这个词。如果包含，我们就将isIPhone数据属性设置为true

---

以上内容未查其他资料，以下内容则是我发布该文章后看到csdn为我推荐的相关的文章得知：

safari 中没办法在回调函数里面执行window.open, 原因是safari的安全机制将其阻挡了

该回答来自CSDN-关于safari不兼容window.open方法的客户端设置解决方案

在调移动支付问题的时候遇到过，用window.open打开一个微信支付链接，唤醒移动支付，在IOS下死活唤醒不了，是js代码冲突问题…是click事件IOS下不兼容问题…最后定位到window.open语句，之后改为window.loaction.href，奇迹般的可以唤醒支付，因此，也就很直观的证明了在Safari下用window.open是有问题的.

原文链接：https://blog.csdn.net/u010633266/article/details/84862851

这些回答证实了我的猜想与解决方案的可行性，
大家也可以看看这两篇相关文章扩展更多