ios - iframe 内的 Phonegap/Cordova ios 外部链接无法在 safari 中打开

Question

我知道我们可以使用 inapp 浏览器在应用程序中打开外部链接。但我说的是 iframe 中的链接，inapp 浏览器解决方案不适用于 iframe 中的链接。我不知何故需要在 iPhone 的 safari 浏览器中打开来自 iframe 的外部链接。有解决方法吗？

以下是我的config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:gap="http://phonegap.com/ns/1.0" id="com.ocevent.ocevents" version="0.0.1">
   <name>Live</name>
   <description>Live Eventmanager</description>
   <author email="chh_rahul@live.com" href="http://softweavertech.com">Rahul Chhabra</author>
   <content src="index.html" />
   <allow-navigation href="*" />
   <allow-intent href="http://*/*" />
   <allow-intent href="https://*/*" />
   <allow-intent href="tel:*" />
   <allow-intent href="sms:*" />
   <icon src="icons/iphone_57x57.png" gap:platform="ios" width="57" height="57" />
   <icon src="icons/iphone_72x72.png" gap:platform="ios" width="72" height="72" />
   <icon src="icons/iphone_76x76.png" gap:platform="ios" width="76" height="76" />
   <icon src="icons/iphone_120x120.png" gap:platform="ios" width="120" height="120" />
   <icon src="icons/iphone_152x152.png" gap:platform="ios" width="152" height="152" />
   <icon src="icons/iphone_180x180.png" gap:platform="ios" width="180" height="180" />
   <icon src="icons/LiveIcon.png" gap:platform="android" />
   <!--splash src="icons/screen.png" gap:platform="android" /-->
   <!--icon src="icons/OCEM4-Android_57.png" gap:platform="android" /-->
   <plugin name="cordova-plugin-camera" />
   <gap:plugin name="cordova-plugin-file" source="pgb" />
   <gap:plugin name="cordova-plugin-customurlscheme" source="npm">
      <param name="URL_SCHEME" value="live" />
   </gap:plugin>
   <plugin name="cordova-plugin-whitelist" />
   <!--gap:plugin name="com.hutchind.cordova.plugins.streamingmedia" spec="0.1.3" source="pgb" /-->
   <gap:plugin name="cordova-plugin-file-transfer" source="pgb" />
   <gap:plugin name="cordova-plugin-dialogs" source="pgb" />
   <gap:plugin name="cordova-plugin-media-capture" source="pgb" />
   <gap:plugin name="cordova-plugin-splashscreen" source="pgb" />
   <gap:config-file platform="ios" parent="UIStatusBarHidden">
      <true />
   </gap:config-file>
   <platform name="android">
      <!-- you can use any density that exists in the Android project -->
      <splash src="icons/screen_640x960.png" density="land-hdpi" />
      <splash src="icons/screen_640x960.png" density="land-ldpi" />
      <splash src="icons/screen_640x960.png" density="land-mdpi" />
      <splash src="icons/screen_640x960.png" density="land-xhdpi" />
      <splash src="icons/screen_640x960.png" density="port-hdpi" />
      <splash src="icons/screen_640x960.png" density="port-ldpi" />
      <splash src="icons/screen_640x960.png" density="port-mdpi" />
      <splash src="icons/screen_640x960.png" density="port-xhdpi" />
   </platform>
   <platform name="ios">
      <!-- images are determined by width and height. The following are supported -->
      <splash src="icons/screen_320x480.png" width="320" height="480" />
      <splash src="icons/screen_640x960.png" width="640" height="960" />
      <splash src="icons/screen_768x1024.png" width="768" height="1024" />
      <splash src="icons/screen_1536x2048.png" width="1536" height="2048" />
      <splash src="icons/screen_1024x768.png" width="1024" height="768" />
      <splash src="icons/screen_2048x1536.png" width="2048" height="1536" />
      <splash src="icons/screen_640x1136.png" width="640" height="1136" />
      <splash src="icons/screen_750x1334.png" width="750" height="1334" />
      <splash src="icons/screen_1242x2208.png" width="1242" height="2208" />
      <splash src="icons/screen_2208x1242.png" width="2208" height="1242" />
   </platform>
   <gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance">
      <false />
   </gap:config-file>
   <preference name="AllowInlineMediaPlayback" value="true" />
   <preference name="DisallowOverscroll" value="true" />
   <preference name="SplashScreen" value="screen" />
   <preference name="SplashScreenDelay" value="5000" />
   <preference name="android-build-tool" value="gradle" />
   <preference name="phonegap-version" value="cli-5.2.0" />
   <preference name="android-minSdkVersion" value="15" />
   <preference name="android-targetSdkVersion" value="15" />
   <preference name="android-installLocation" value="auto" />
</widget> 

如有任何帮助，我们将不胜感激。

谢谢 拉胡尔

Answer 1

这是我制定的解决方法。

由于您在 Cordova 容器中运行 Iframe，因此您可以修改它的内容。

这个想法是——

1. “监听”iframe 页面加载事件
2. 搜索您希望在 cordova 外部打开的 url，然后从 iframe 内的 html 元素中备份并删除 href 属性。
3. 我们分配“onclick”监听器而不是 href 属性，它将“postMessage”发送到父 iFrame 容器(可能是您的 Cordova 网页)，您可以在其中处理您认为合适的点击事件和 url 链接，例如通过 InAppBrowserPlugin 打开它。

下面是实现:

// Making sure we're in Cordova environment
if(window['cordova']) {
    const linksToModify = [
      // *** Modify *** to the correct selector for your IFrame href elemenets you wish to affect, here's an example (You can put multiple elements here):
      yourIframe.contentWindow.document.querySelector('#html_element > iframe').contentWindow.document.querySelector('body > a:nth-child(1)'),
    ];

    // Once we have a reference to the elements containing the href urls we remove their href property
    // Instead the href property, we "postMessage" to your cordova/phonegap container, where you can handle the href string as you see fit.
    for(let el of linksToModify) {
      let theHref = el.getAttribute('href');
      if(theHref == null) continue;
      try {
        el.removeAttribute('href');
      } catch(_) {}
      try {
        el.removeAttribute('target');
      } catch(_) {}
      // Notify parent iframe of the click instead of opening the url in browser
      el.setAttribute('onclick', "parent.postMessage({type:'fromIframe',event:'open',link:'" + theHref + "'},'*');")
    }
}

为包含 href 属性的特定 iframe 元素修改元素选择器。
提示 - 您可能希望在页面加载后在重试计时器下运行代码块，在我的例子中，我使用了 15 次最大重试(每秒 1 次)。 一旦找到元素并删除 href 属性，您当然可以取消计时器。

然后在父容器中添加监听器(你的Cordova网页js代码):

window.addEventListener('message', function(thePostedMessage) {
    /// Handle link as you wish, it's in "thePostedMessage" argument.
}