外部Safari窗口中的Phonegap 3.5.0打开链接无法正常工作

时间:2014-09-12 22:18:05

标签: javascript cordova inappbrowser

这个问题已被问了一百万次,我已经尝试了所有的解决方案:

“防止默认”解决方案, “删除冲突的状态栏隐藏插件”解决方案, “_blank& _system,location = yes& no”解决方案的变体,

但似乎都没有用。该URL只在应用程序本身中打开,无法退出。

我甚至尝试过我在以下几个地方看过的代码:

var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
ref.addEventListener('exit', function(event) { alert(event.type); });

但是,该链接只是在应用中打开。没有我听说过的“完成”按钮。没有Safari。

我的config.xml:

<feature name="http://api.phonegap.com/1.0/device" />

<!-- Platform Build -->
<gap:platform name="ios" />

<!--
    If you do not want any permissions to be added to your app, add the
    following tag to your config.xml; you will still have the INTERNET
    permission on your app, which PhoneGap requires.
-->
<preference name="permissions"                value="none"/>

<!-- Customize your app and platform with the preference element. -->
<preference name="phonegap-version"           value="2.9.0" />          <!-- all: current version of PhoneGap -->
<preference name="orientation"                value="default" />        <!-- all: default means both landscape and portrait are enabled -->
<preference name="target-device"              value="universal" />      <!-- all: possible values handset, tablet, or universal -->
<preference name="fullscreen"                 value="true" />           <!-- all: hides the status bar at the top of the screen -->
<preference name="webviewbounce"              value="true" />           <!-- ios: control whether the screen 'bounces' when scrolled beyond the top -->
<preference name="prerendered-icon"           value="true" />           <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->
<preference name="stay-in-webview"            value="false" />          <!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in -->
<preference name="ios-statusbarstyle"         value="black-opaque" />   <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
<preference name="detect-data-types"          value="true" />           <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->
<preference name="exit-on-suspend"            value="false" />          <!-- ios: if set to true, app will terminate when home button is pressed -->
<preference name="show-splash-screen-spinner" value="true" />           <!-- ios: if set to false, the spinner won't appear on the splash screen during app loading -->
<preference name="auto-hide-splash-screen"    value="true" />           <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->
<preference name="disable-cursor"             value="false" />          <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->
<preference name="android-minSdkVersion"      value="7" />              <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->
<preference name="android-installLocation"    value="auto" />           <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->

<preference name="OpenAllExternalURLsInWebView"    value="true" />


<!-- Plugins can also be added here. -->
<gap:plugin name="org.apache.cordova.inappbrowser" />

<!-- Define app icon for each platform. -->

<!-- icons -->
<icon src="icons/ios/icon-57.png" /> <!-- default -->
<icon src="icons/ios/icon-29.png" gap:platform="ios" width="29" height="29" />
<icon src="icons/ios/icon-29_at_2x.png" gap:platform="ios" width="58" height="58" />
<icon src="icons/ios/icon-40.png" gap:platform="ios" width="40" height="40" />
<icon src="icons/ios/icon-40_at_2x.png" gap:platform="ios" width="80" height="80" />
<icon src="icons/ios/icon-50.png" gap:platform="ios" width="50" height="50" />
<icon src="icons/ios/icon-50_at_2x.png" gap:platform="ios" width="100" height="100" />
<icon src="icons/ios/icon-57.png" gap:platform="ios" width="57" height="57" />
<icon src="icons/ios/icon-57_at_2x.png" gap:platform="ios" width="114" height="114" />
<icon src="icons/ios/icon-60.png" gap:platform="ios" width="60" height="60" />
<icon src="icons/ios/icon-60_at_2x.png" gap:platform="ios" width="120" height="120" />
<icon src="icons/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="icons/ios/icon-72_at_2x.png" gap:platform="ios" width="144" height="144" />
<icon src="icons/ios/icon-76.png" gap:platform="ios" width="76" height="76" />
<icon src="icons/ios/icon-76_at_2x.png" gap:platform="ios" width="152" height="152" />
<icon src="icons/ios/icon-120.png" gap:platform="ios" width="120" height="120" />
<icon src="icons/ios/icon-120_at_2x.png" gap:platform="ios" width="240" height="240" />
<icon src="icons/ios/icon-512.png" gap:platform="ios" width="512" height="512" />
<icon src="icons/ios/icon-512_at_2x.png" gap:platform="ios" width="1024" height="1024" />

<!-- launch screens -->
<gap:splash gap:platform="ios" height="480" src="splash/ios/Default-iphone.png" width="320"  />
<gap:splash gap:platform="ios" height="960" src="splash/ios/Default-iphone_x2.png" width="640" />
<gap:splash gap:platform="ios" height="1136" src="splash/ios/splash-iphone5-538h.png" width="640" />
<gap:splash gap:platform="ios" height="1024" src="splash/ios/Default-iPad-Portrait.png" width="768" />
<gap:splash gap:platform="ios" height="2008" src="splash/ios/Default-iPad-Portrait_x2.png" width="1536" />
<gap:splash gap:platform="ios" height="768" src="splash/ios/Default-iPad-Landscape.png" width="1024" />
<gap:splash gap:platform="ios" height="1496" src="splash/ios/Default-iPad-Landscape_x2.png" width="2048" />

<access origin="*"/> <!-- allow local pages -->

<!-- plugins -->

 <feature name="StatusBar">
    <param name="ios-package" onload="true" value="CDVStatusBar" />
</feature>
<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#000000" />


<feature name="InAppBrowser"> 
    <param name="ios-package" value="CDVInAppBrowser" /> 
</feature>

我的index.html,目前:

<a href="http://google.com" target="_system">Google</a>
[...]
<script src="scripts/vendor.js"></script>

<script src="scripts/main.js"></script>

<script src="scripts/plugins.js"></script>

<script src="phonegap.js"></script>


<script>
document.addEventListener("deviceready", onDeviceReady, false);

// function onDeviceReady() {
//     StatusBar.hide();
// }

$('a').click(function(event) {
    event.preventDefault();
    window.open($(this).attr("href"), "_system");
});
</script>

我也试过它,以便标签看起来像:

<a href="#" onclick="window.open('http://google.com', '_system', 'location=yes');">Google</a>

相同的结果:在应用中打开。

我可以看到myApp / plugins中存在插件:

http://i.imgur.com/MKmafG4.png

我不知道从何处开始对此进行故障排除。我甚至没有得到人们说你应该用inappbrowser得到的“完成”按钮,所以这让我认为它不能正常工作。

任何和所有帮助都受到了广泛的赞赏。

2 个答案:

答案 0 :(得分:10)

好的伙计们,这里的答案对我有用。唯一有用的东西。我已经尝试过其他所有存在的解决方案。这是一个。

http://www.excellentwebworld.com/phonegap-open-a-link-in-safari-or-external-browser/

那家伙的解决方案。但是,它并没有得到很好的解释,所以如果你发现它令人困惑,我会对它进行扩展。

我首先尝试搜索他正在谈论的文件,因为他没有告诉你它在哪里。如果你这样做,你会因某种原因得到笛卡尔结果,修改文件实际上不起作用。所以这就是你如何真正实现它的目的:

在XCode中打开项目时,在左侧边栏文件列表(Project Navigator)中,

  1. 展开“CordovaLib.xcodeproj
  2. 展开“课程”
  3. 展开“命令”
  4. 文件是“CDVWebViewDelegate.m”
  5. 命令+ f查找“shouldstartloadwith”,你会找到该功能。以前的旧函数就像这样开始:

    (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
    {
        BOOL shouldLoad = YES;
    

    您将修改它看起来像这样:

    (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
    {
    
        if([[NSString stringWithFormat:@"%@",request.URL] rangeOfString:@"file"].location== NSNotFound)
        {
            [[UIApplication sharedApplication] openURL:[request URL]];
            return NO;
        }
        BOOL shouldLoad = YES;
    

    然后,使用:

    window.open('http://google.com', '_system');
    

    呼。 Adobe确实需要更新他们的文档。

答案 1 :(得分:1)

我尝试了所有,最后我找到了解决方案。 在Android中工作完美的外部链接。

低于IOS 9的版本工作Okey,但在最新的IOS不工作外部链接,我的应用程序在后台打开链接,似乎链接不起作用。

问题出在index.html中,它有关于内容安全策略的错误元标记

将此添加到index.html解决了我的问题:

<meta http-equiv="Content-Security-Policy" content="img-src * 'self' data:; default-src * 'self' gap: wss: ws: ; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval';">

我引用解决了我的问题的帖子

  

很抱歉没有回复。

     

这不是错误,cordova-ios应用需要差距:CSP上的协议   使插件工作。

     

使用评论查看默认Cordova应用程序包含的CSP   它解释了其中的一些,最重要的是,差距:

     

在iOS 10上,CSP变得更加严格,阻止了插件的运行   如果你不包括差距:

> <!--
>         Customize this policy to fit your own app's needs. For more guidance, see:
>             https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
>         Some notes:
>             * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
>             * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
>             * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
>                 * Enable inline JS: add 'unsafe-inline' to default-src
>         -->
>         <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com
> 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src
> 'self' data: content:;">