Angular转iOS应用后href外链及邮件功能失效问题求助

核心问题 #

iOS WebView（无论用Capacitor/Cordova还是其他打包工具）默认不支持target="_blank"的链接跳转——因为WebView没有浏览器的多标签页机制，会直接拦截这类请求；同时mailto:这类协议链接也可能被WebView的安全策略拦截，导致功能失效。另外你代码里<a>标签嵌套了自定义按钮组件，可能存在点击事件被组件内部阻止的情况。

具体解决步骤 #

1. 移除target="_blank"并改用原生插件处理外部跳转

WebView无法处理_blank标签，建议直接用平台提供的浏览器插件打开外部链接，避免拦截：

• 如果你用Capacitor，先安装@capacitor/browser插件，然后修改组件代码：
  • 模板部分：

    <app-custom-button 
      [color]="CustomButtonColor.Dark" 
      [id]="item?.name + 'Button'" 
      [type]="CustomButtonType.ButtonExpanded"
      (click)="handleLinkClick(item?.link)">
      {{ 'profile.legalItems.read'| translate }} 
    </app-custom-button>
    

  • 组件逻辑：

    import { Browser } from '@capacitor/browser';
    
    async handleLinkClick(url: string) {
      if (!url) return;
      
      // 区分普通链接和邮件协议
      if (url.startsWith('mailto:')) {
        window.location.href = url;
      } else {
        await Browser.open({ url, windowName: '_system' });
      }
    }
    

2. 配置WebView允许导航规则

需要在打包配置里明确允许目标域名和协议，避免被安全策略拦截：

• Capacitor：在capacitor.config.ts中添加允许导航的规则：

  export default defineConfig({
    server: {
      allowNavigation: ['*.your-domain.com', 'mailto:*']
    }
  });
  

• Cordova：在config.xml中添加：

  <allow-intent href="mailto:*" />
  <allow-navigation href="https://*.your-domain.com/*" />
  

3. 排查自定义按钮的事件拦截

检查app-custom-button组件内部是否有preventDefault()或stopPropagation()阻止了父级<a>标签的点击事件，如果有，需要移除这类阻止逻辑，或者直接在按钮上绑定跳转事件（如步骤1所示）。

内容的提问来源于stack exchange，提问作者kampai35