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

Posted 2021-04-02

我知道我们可以使用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="[e-mail]" 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> 

任何帮助，将不胜感激。

谢谢Rahul

答案

这是我做过的解决方法。

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

这个想法是 -

1. “监听”iframe页面加载的事件
2. 搜索您希望在cordova外部打开的网址，然后从iframe中的html元素备份并删除href属性。
3. 而不是href属性，我们将“onMlick”侦听器分配给父iFrame容器（可能是您的Cordova网页），在那里您可以处理click-event和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.
}