Ionic3中无需修改<a>标签实现在系统浏览器打开iframe内链接

嘿，这个场景我之前做项目时遇到过，给你几个分情况的解决方案，你可以根据自己的情况选择：

1. 当iframe内容与你的App同域时（最容易处理） #

这种情况下，你可以直接访问iframe内部的文档，监听点击事件并拦截链接跳转：

前置准备： #

首先确保已经安装并配置了cordova-plugin-inappbrowser（这是Ionic中打开系统浏览器的标准插件）：

ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

然后在app.module.ts中导入并添加到providers数组：

import { InAppBrowser } from '@ionic-native/in-app-browser';

@NgModule({
  ...
  providers: [
    ...
    InAppBrowser
  ]
})
export class AppModule {}

代码实现： #

在你的页面组件中，等待iframe加载完成后，给内部文档添加点击监听：

import { Component, OnInit } from '@angular/core';
import { InAppBrowser } from '@ionic-native/in-app-browser';

@Component({
  selector: 'app-your-page',
  templateUrl: './your-page.page.html',
  styleUrls: ['./your-page.page.scss'],
})
export class YourPagePage implements OnInit {

  constructor(private iab: InAppBrowser) { }

  ngOnInit() {
    // 假设你的iframe有id="contentIframe"
    const iframe = document.getElementById('contentIframe') as HTMLIFrameElement;
    
    iframe.onload = () => {
      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
      
      // 监听iframe内的所有点击事件
      iframeDoc.addEventListener('click', (event) => {
        const target = event.target as HTMLElement;
        // 找到被点击的a标签（处理点击a内子元素的情况，比如img）
        const linkElement = target.closest('a');
        
        if (linkElement && linkElement.href) {
          event.preventDefault(); // 阻止默认的iframe内跳转
          // 用InAppBrowser打开系统浏览器
          this.iab.create(linkElement.href, '_system');
        }
      });
    };
  }
}

2. 当iframe内容与你的App跨域时（同源限制下的解决方案） #

这种情况因为浏览器同源策略，你没法直接访问iframe内部的文档，这里给你两个可行思路：

思路A：通过config.xml配置限制导航域名 #

在项目的config.xml中，只允许你的App自身的域名在WebView内打开，其他域名的链接会自动跳转到系统浏览器：

<!-- 允许你的App本地开发地址 -->
<allow-navigation href="http://localhost:8100/*" />
<!-- 允许你的App线上生产地址 -->
<allow-navigation href="https://your-official-domain.com/*" />
<!-- 允许其他域名跳转至系统浏览器 -->
<allow-intent href="*" />

注意：这个方法只对跨域链接有效，如果iframe内的链接是同域的，还是会在iframe内打开，这时候需要结合思路B。

思路B：使用本地代理页面中转 #

创建一个本地的代理页面，让它加载目标iframe内容，然后代理页面与你的App通过postMessage通信：

1. 在src/assets目录下创建iframe-proxy.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IFrame Proxy</title>
  <style>
    body, html { margin: 0; padding: 0; height: 100%; width: 100%; }
    iframe { width: 100%; height: 100%; border: none; }
  </style>
</head>
<body>
  <script>
    window.addEventListener('load', () => {
      // 获取传递的目标URL
      const urlParam = new URLSearchParams(window.location.search).get('targetUrl');
      if (!urlParam) return;

      const targetUrl = decodeURIComponent(urlParam);
      const proxyIframe = document.createElement('iframe');
      proxyIframe.src = targetUrl;
      document.body.appendChild(proxyIframe);

      // 如果代理页面与目标iframe同域，监听点击事件并发送消息
      proxyIframe.onload = () => {
        try {
          const innerDoc = proxyIframe.contentDocument || proxyIframe.contentWindow.document;
          innerDoc.addEventListener('click', (e) => {
            const link = e.target.closest('a');
            if (link && link.href) {
              e.preventDefault();
              // 向父页面发送消息
              window.parent.postMessage({
                type: 'OPEN_EXTERNAL_LINK',
                url: link.href
              }, '*');
            }
          });
        } catch (err) {
          // 跨域情况下无法访问，忽略（这时候可以用思路A的配置）
          console.log('Cross-domain restriction, cannot access iframe content');
        }
      };
    });
  </script>
</body>
</html>

2. 在你的Ionic页面中，加载这个代理页面并监听消息：

import { Component, OnInit } from '@angular/core';
import { InAppBrowser } from '@ionic-native/in-app-browser';

@Component({
  selector: 'app-your-page',
  templateUrl: './your-page.page.html',
  styleUrls: ['./your-page.page.scss'],
})
export class YourPagePage implements OnInit {

  constructor(private iab: InAppBrowser) { }

  ngOnInit() {
    // 原来的目标iframe地址
    const originalIframeUrl = 'https://external-domain.com/your-content';
    // 生成代理页面的URL
    const proxyUrl = `assets/iframe-proxy.html?targetUrl=${encodeURIComponent(originalIframeUrl)}`;
    
    // 创建并添加iframe到页面
    const iframe = document.createElement('iframe');
    iframe.src = proxyUrl;
    iframe.style.width = '100%';
    iframe.style.height = '500px';
    document.getElementById('iframeContainer').appendChild(iframe);

    // 监听代理页面发送的消息
    window.addEventListener('message', (event) => {
      if (event.data.type === 'OPEN_EXTERNAL_LINK') {
        this.iab.create(event.data.url, '_system');
      }
    });
  }
}

这样，同域的情况下代理页面可以拦截点击并通知父页面打开系统浏览器，跨域的情况下可以结合config.xml的配置自动跳转。

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