2016-06-30 5 views
1

Ich benutze plugins cordova-plugin-inappbrowser und cordova-plugin-wkwebview in meiner App mit ios. Aber loadstop events funktioniert nicht, deswegen kann ich inappbrowser beim loadstop Event auch nicht schließen.cordova: inappbrowser kann nicht geschlossen werden wegen wkwebview plugin in ios

Es funktioniert ganz gut ohne wekwebview.

I-Code von Beispielprojekt hinzugefügt, dieses Problem zu reproduzieren:

config.xml

<?xml version="1.0" encoding="UTF-8"?> 

<!-- config.xml reference: https://build.phonegap.com/docs/config-xml --> 
<widget xmlns  = "http://www.w3.org/ns/widgets" 
     xmlns:gap = "http://phonegap.com/ns/1.0" 
     id  = "com.phonegap.helloworld" 
     version = "1.0.0"> 

    <name>Hello World</name> 

    <description> 
     Hello World sample application 
    </description> 

    <author href="http://phonegap.com" email="[email protected]"> 
     PhoneGap Team 
    </author> 

rmission on your app, which PhoneGap requires. 
    --> 
    <preference name="permissions"    value="none"/> 


    <preference name="auto-hide-splash-screen" value="true" />   


    <gap:plugin name="cordova-plugin-wkwebview" source="npm" /> 
    <gap:plugin name="cordova-plugin-inappbrowser" source="npm" /> 
    <gap:plugin name="org.crosswalk.engine" spec="1.3.0" source="pgb" /> 

    <icon src="icon.png" /> 
    <icon src="res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:qualifier="ldpi" /> 
    <icon src="res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:qualifier="mdpi" /> 
    <icon src="res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:qualifier="hdpi" /> 
    <icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:qualifier="xhdpi" /> 
    <icon src="res/icon/blackberry/icon-80.png"  gap:platform="blackberry" /> 
    <icon src="res/icon/blackberry/icon-80.png"  gap:platform="blackberry" gap:state="hover"/> 
    <icon src="res/icon/ios/icon-57.png"   gap:platform="ios"  width="57" height="57" /> 
    <icon src="res/icon/ios/icon-72.png"   gap:platform="ios"  width="72" height="72" /> 
    <icon src="res/icon/ios/icon-57-2x.png"   gap:platform="ios"  width="114" height="114" /> 
    <icon src="res/icon/ios/icon-72-2x.png"   gap:platform="ios"  width="144" height="144" /> 
    <icon src="res/icon/webos/icon-64.png"   gap:platform="webos" /> 
    <icon src="res/icon/windows-phone/icon-48.png" gap:platform="winphone" /> 
    <icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone" gap:role="background" /> 

    <!-- Define app splash screen for each platform. --> 
    <gap:splash src="res/screen/android/screen-ldpi-portrait.png"  gap:platform="android" gap:qualifier="port-ldpi" /> 
    <gap:splash src="res/screen/android/screen-mdpi-portrait.png"  gap:platform="android" gap:qualifier="port-mdpi" /> 
    <gap:splash src="res/screen/android/screen-hdpi-portrait.png"  gap:platform="android" gap:qualifier="port-hdpi" /> 
    <gap:splash src="res/screen/android/screen-xhdpi-portrait.png"  gap:platform="android" gap:qualifier="port-xhdpi" /> 
    <gap:splash src="res/screen/blackberry/screen-225.png"    gap:platform="blackberry" /> 
    <gap:splash src="res/screen/ios/screen-iphone-portrait.png"   gap:platform="ios"  width="320" height="480" /> 
    <gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png"  gap:platform="ios"  width="640" height="960" /> 
    <gap:splash src="res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios"  width="640" height="1136" /> 
    <gap:splash src="res/screen/ios/screen-ipad-portrait.png"   gap:platform="ios"  width="768" height="1024" /> 
    <gap:splash src="res/screen/ios/screen-ipad-landscape.png"   gap:platform="ios"  width="1024" height="768" /> 
    <gap:splash src="res/screen/windows-phone/screen-portrait.jpg"  gap:platform="winphone" /> 


    <access origin="*"/> 
    <!-- Added the following intents to support the removal of whitelist code from base cordova to a plugin --> 
    <!-- Whitelist configuration. Refer to https://cordova.apache.org/docs/en/edge/guide_appdev_whitelist_index.md.html --> 
    <plugin name="cordova-plugin-whitelist" version="1" /> 
    <allow-intent href="http://*/*" /> 
    <allow-intent href="https://*/*" /> 
    <allow-intent href="tel:*" /> 
    <allow-intent href="sms:*" /> 
    <allow-intent href="mailto:*" /> 
    <allow-intent href="geo:*" /> 
    <platform name="android"> 
     <allow-intent href="market:*" /> 
    </platform> 
    <platform name="ios"> 
     <allow-intent href="itms:*" /> 
     <allow-intent href="itms-apps:*" /> 
    </platform> 

</widget> 

index.html

<!DOCTYPE html> 

<html> 
    <head> 

     <meta charset="utf-8" /> 
     <meta name="format-detection" content="telephone=no" /> 
     <meta name="msapplication-tap-highlight" content="no" /> 
     <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> 
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
     <script type="text/javascript" src="js/jquery-1.10.2.js"></script> 
     <title>Hello World</title> 
    </head> 
    <body> 
      <br><br><br> 
       <button onclick="login()">Open web</button> 

     <script type="text/javascript" src="cordova.js"></script> 

     <script type="text/javascript"> 

      function login(){ 

       var ref = window.open('http://www.google.com', '_blank', 'location=no'); 

       ref.addEventListener('loadstop', function(event){ 
        alert('from load stop'); 
        ref.close();     
      }); 
    } 
     </script> 
    </body> 
</html> 

Es völlig in Ordnung, wenn Android funktioniert, aber Dieses Problem tritt nur in ios auf. Ich benutze Phonegap Build um App zu erstellen.

Ich recherchierte viel, konnte aber noch keine perfekte Lösung finden.

Ich werde wirklich jeden Beitrag zu schätzen wissen. Danke

Antwort

1

Ich bin gerade durch die Wringer mit InAppBrowser und WKWebView auch so gewesen, so teile ich Ihre Schmerzen!

Was ich fand, ist, dass die Ereignisse durch das InAppbrowser-Fenster selbst ausgelöst wurden, anstatt den URL-Inhalt im Fenster. So wurde Loadstop jedes Mal ausgelöst, wenn das InAppBrowser-Fenster in der App angezeigt wurde und nicht, wenn die URL vollständig geladen wurde.

Mein Rat, und andere Leute in verschiedenen Diskussionsgruppen, ist es, die beiden zusammen zu vergessen, bis WKWebView stabil ist und der InAppBrowser dafür entwickelt wurde. Also wählen Sie einfach den, den Sie wirklich brauchen, und den anderen aus.

Ich weiß, dass es nicht wirklich eine Lösung ist, aber nachdem ich WKWebView einsortiert habe, haben sich alle meine Ereignisse wie erwartet verhalten.

Tom

+0

Ja - das ist ein bekanntes Problem. Ich verwende derzeit einen Fork von IAB, der mit WKWebView funktioniert. Sie können dies versuchen, bis die offizielle aktualisiert wird: https://github.com/manucorporat/cordova-plugin-inappbrowser – dotNetkow

+0

@dotNetkow Wie installieren Sie das gegabelte Plugin von manucorporat? –

+0

@JordanMcDonald Ich benutze PhoneGap Build, also ist die config.xml Zeile: Ich bin nicht so vertraut mit der Cordvoa CLI, aber dieser Befehl wäre "cordova plugin add https://github.com/manucorporat/cordova-plugin-in-appbrowser.git". Ich hoffe, das hilft! – dotNetkow

Verwandte Themen