uni-app webview自动跳转外部应用（安卓与ios效果区别）

uni-app webview自动跳转外部应用（安卓与ios效果区别）

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win10
HBuilderX 正式
HBuilderX版本 3.99
手机系统 Android
手机版本号 Android 12
手机厂商 华为
手机机型 vivo
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<view>  
    <web-view :webview-styles="webviewStyles" :src="getThreePartUrl"></web-view>  
</view>  

getThreePartUrl() {
    return "一个淘宝店铺首页url"
}

操作步骤：

  1. 通过点击按钮跳转webview组件网页
  2. 加载网页完毕后就跳转淘宝应用了

预期结果：

我希望就单纯在网页中嵌入淘宝店铺首页
不要自动跳转淘宝，稍后我自己弹窗让用户选择要不要跳转。

实际结果：

加载网页完毕后就跳转淘宝应用了，难道说webview就是有自动跳转的功能？？？

bug描述：

我就想知道怎么不跳转，我webview中src设置淘宝店铺首页就自动跳转了淘宝，这是你们的设计还是bug？
如果是设计如此 请问你们有提供api不跳转吗？ 这涉及思路是不是要改改？


更多关于uni-app webview自动跳转外部应用（安卓与ios效果区别）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

安卓中webview的src是淘宝店铺会自动跳转淘宝 但是ios不会自动跳转

更多关于uni-app webview自动跳转外部应用（安卓与ios效果区别）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


使用了
wv.overrideUrlLoading({
// “reject" 表示满足match属性定义的提交时拦截url跳转并触发callback回调，不满足match属性定义的条件时不拦截url继续加载。
// “allow” 表示满足match属性定义的条件时不拦截url继续加载，不满足match属性定义的条件时拦截url跳转并触发callback回调；
mode: ‘reject’,
// match: “taobao://”,
}, function(e) {
console.warn(‘reject Url’, url);
})
拦截 ios是正常的 安卓不正常

在 uni-app 中使用 webview 组件时，如果页面中有链接跳转到外部应用（例如：电话、邮件、地图、或其他应用），不同平台（Android 和 iOS）的表现可能会有所不同。以下是常见的情况和区别：

1. 电话链接 (tel:)

  • Android: 点击 tel: 链接时，通常会直接弹出拨号界面，用户可以立即拨打电话。
  • iOS: 点击 tel: 链接时，会直接拨打电话，无需用户确认。

2. 邮件链接 (mailto:)

  • Android: 点击 mailto: 链接时，会弹出系统默认邮件客户端，用户可以编写邮件。
  • iOS: 点击 mailto: 链接时，同样会弹出系统默认邮件客户端。

3. 地图链接 (maps:)

  • Android: 点击地图链接（如 https://maps.google.com 或 geo:），会直接跳转到 Google Maps 或其他默认地图应用。
  • iOS: 点击地图链接时，会跳转到 Apple Maps 或用户默认的地图应用。

4. 应用内跳转（自定义协议）

  • 如果链接是自定义协议（如 myapp://），用于跳转到其他应用：
    • Android: 如果设备上安装了目标应用，会直接跳转；如果没有安装，可能会弹出错误提示或没有任何反应。
    • iOS: 如果设备上安装了目标应用，会直接跳转；如果没有安装，可能会弹出一个提示框，询问是否打开 App Store 下载。

5. 外部链接 (http:// 或 https://)

  • Android: 点击外部链接时，默认会在当前 webview 中打开。如果需要跳转到系统浏览器或其他应用，可能需要手动处理。
  • iOS: 点击外部链接时，默认会在当前 webview 中打开。如果需要跳转到系统浏览器或其他应用，可能需要手动处理。

6. 处理跳转行为

如果你希望统一处理跳转行为，可以在 webview 的 @message 或 @load 事件中拦截链接，然后根据平台和链接类型进行跳转。

例如：

// 在 uni-app 中监听 webview 的加载事件
const handleLoad = (e) => {
  const url = e.detail.url;
  if (url.startsWith('tel:')) {
    // 处理电话链接
    uni.makePhoneCall({
      phoneNumber: url.replace('tel:', '')
    });
  } else if (url.startsWith('mailto:')) {
    // 处理邮件链接
    // 这里可以根据平台调用不同方法
  } else if (url.startsWith('myapp://')) {
    // 处理自定义协议
    // 这里可以根据平台调用不同方法
  } else {
    // 其他链接，可以继续在当前 webview 中加载
  }
};
回到顶部