iOS端iframe内链接无法打开问题求助（Kendo+Cordova环境）

这个问题在Cordova开发iOS应用时很常见，不少开发者都遇到过类似情况，以下是几个经过验证的可行方案：

1. 捕获iframe内的链接点击事件，通过Cordova API打开 #

由于iOS对iframe内的跨域导航有严格限制，直接用target="_parent"可能无法触发跳转。可以通过监听iframe内的点击事件，手动调用Cordova的InAppBrowser插件打开链接：

首先确保已安装InAppBrowser插件：

cordova plugin add cordova-plugin-inappbrowser

然后在主页面添加监听逻辑：

// 获取iframe元素
const iframe = document.getElementById('view-html-viewer-iframe');
// 监听iframe加载完成
iframe.addEventListener('load', function() {
  // 获取iframe内部的document对象
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  // 给所有a标签添加点击事件
  iframeDoc.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认跳转
      const url = this.href;
      // 用InAppBrowser打开链接，_system调用系统浏览器，_blank在应用内打开
      window.open(url, '_system', 'location=yes');
    });
  });
});

2. 调整Cordova的内容安全策略（CSP） #

在项目的config.xml中，更新CSP配置，允许外部资源和导航：

<content-security-policy>
  default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval';
  script-src 'self' 'unsafe-inline' 'unsafe-eval';
  style-src 'self' 'unsafe-inline';
  img-src * data:;
  frame-src 'self' about:blank https://google.com;
  connect-src *;
</content-security-policy>

注意将https://google.com替换为你实际需要跳转的域名，生产环境不建议用*允许所有域名。

3. 配置Cordova的allow-navigation规则 #

在config.xml中添加允许导航到目标域名的规则：

<allow-navigation href="https://google.com/*" />
<allow-navigation href="about:blank" />

这会让Cordova允许应用内部导航到指定域名，解决iOS的跨域限制问题。

4. 修改链接的target属性 #

尝试将链接的target="_parent"替换为target="_self"，同时确保上述CSP和allow-navigation配置正确：

<p><a href="https://google.com/" target="_self">Google</a></p>

iOS对iframe内_parent目标的处理逻辑和Android不同，改用_self可能绕过限制。

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