CODEWITHSUNDEEP
javascriptioscordova
Matt
Matt

Reputation: 1445

How can I open an external link in Safari not the app's UIWebView?

I have a Phonegap (cordova) application where I want to load some external webpages within the phonegap WebView and I have other external webpages that I want to load in safari when the user activates them.

Typically most people have the problem where they want to open an external link in the WebView. Setting OpenAllWhitelistURLsInWebView to YES (in Cordova.plist/Phongap.plist) solves that problem.

But I don't want to open all links the the WebView, just some.

I was hoping I could just call window.open('http://someexternalsite') to open in Safari and window.parent.location.href = 'http://mysite' to open it in the WebView.

Any idea how to do this?

Upvotes: 30

Views: 44794

Answers (10)

jcesarmobile
jcesarmobile

Reputation: 53301

The right way of doing this is using the inAppBrowser plugin

install it using the cordova CLI:

cordova plugin add org.apache.cordova.inappbrowser

Then, to open a link on safari just use:

window.open('http://apache.org', '_system');

There is a newer version of the plugin hosted on npm

to install it from the cordova CLI:

cordova plugin add cordova-plugin-inappbrowser

To open the website on safari you can use 

cordova.InAppBrowser.open('http://apache.org', '_system');

or, if you want to continue using window.open like the older version you can just do this on device ready event:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    window.open = cordova.InAppBrowser.open;
}

Upvotes: 6

Lobo
Lobo

Reputation: 1

iside the xcode

//Place code in /Classes/MainViewController.m 

    - (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)­navigationType
{ NSURL *url = [request URL]; 
// Intercept the external http requests and forward to Safari.app 
// Otherwise forward to the PhoneGap WebView 
if ([[url scheme] isEqualToString:@"http"] || [[url scheme] isEqualToString:@"https"]) { [[UIApplication sharedApplication] openURL:url]; return NO; } else { return [ super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType ]; }
}

Upvotes: 0

Brandon J Brotsky
Brandon J Brotsky

Reputation: 523

  1. Add target="_blank" to your links. ie:

    <a href="http://www.brandonbrotsky.com/" target="_blank"></a>

  2. Make sure access has an origin of * /> in your config.xml (make sure its the one in the root of the app directory, above the www folder. ie:

    <access origin="*" />

  3. Add the following code to MainViewController.m

    - (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSURL *url = [request URL];

    // Intercept the external http requests and forward to Safari.app
    // Otherwise forward to the PhoneGap WebView
    if ([[url scheme] isEqualToString:@"http"] || [[url scheme] isEqualToString:@"https"]) {
        [[UIApplication sharedApplication] openURL:url];
        return NO;
    }
    else {
        return [ super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType ];
    }
}

I made a quick video explaining how to fix this issue:

http://www.youtube.com/watch?v=zqbjXSnAR-Q&feature=c4-overview&list=UUefS6KLvFQVjhmL6hiBq4Sg

Hope it helps!

Upvotes: 0

Cristiana Chavez
Cristiana Chavez

Reputation: 11519

This works for me it helps alot

-(void)viewDidLoad
{
   [super viewDidLoad];
    ////////////////////////
    NSString *urlAddress = @"http://www.playbuzz.org/";
    //NSURL *myURL = [NSURL URLWithString:urlAddress];
    myWebview.delegate = (id)self;
   [myWebview loadRequest:[NSURLRequest requestWithURL:[NSURL     URLWithString:urlAddress]]];
}


- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {


    //  open External Links (not beginning with www.playbuzz.org/ in Safari.app
    if (
        (navigationType == UIWebViewNavigationTypeLinkClicked) &&
        ( ![[[request URL] absoluteString] hasPrefix:@"http://www.playbuzz.org/"])
        ) {

        [[UIApplication sharedApplication] openURL:request.URL];
        return NO;
    }

   //open Internal links in uiwebview
   return YES;
}`

Upvotes: 0

Ryan
Ryan

Reputation: 5496

Just catch all links in your javascript that have target="_blank", and pass them to window.open with the '_system' param. This will work on both iOS and Android.

$(document).on('click', 'a[target="_blank"]', function(ev) {
  var url;

  ev.preventDefault();
  url = $(this).attr('href');
  window.open(url, '_system');
});

Upvotes: 11

Alan124
Alan124

Reputation: 31

Tested on cordova 2.4 + iOS

use "_system" and no need to update any configuration

http://docs.phonegap.com/en/2.3.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser

target: the target to load the URL in (String) (Optional, Default: "_self")

_self - opens in the Cordova WebView if url is in the white-list, else it opens in the InAppBrowser _blank - always open in the InAppBrowser _system - always open in the system web browser

Upvotes: 2

Titouan de Bailleul
Titouan de Bailleul

Reputation: 12949

If the links you want to open in safari all contain a common string, you can use the next piece of code.

- (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSURL *url = [request URL];

    // Intercept the external http requests and forward to Safari.app
    // Otherwise forward to the PhoneGap WebView
    if ([[url scheme] isEqualToString:@"SCHEME"]) {
        [[UIApplication sharedApplication] openURL:url];
        return NO;
    }
    else {
        return [ super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType ];
    }
}

This code placed in the AppDelegate.m will open all URL that use the specified SCHEME in Safari.

I'm afraid that is all I could come up with.

Hope this helps

UPDATE :

The code should be placed in the MainViewControler, at least for cordova 2.2.0.

The method is initially commented. I had to use it to redirect Google maps links : 

NSRange isGoogleMaps = [[url absoluteString] rangeOfString:@"maps.google.com" options:NSCaseInsensitiveSearch];
NSRange isGoogleTerms = [[url absoluteString] rangeOfString:@"terms_maps.html" options:NSCaseInsensitiveSearch];

if(isGoogleMaps.location != NSNotFound || isGoogleTerms.location != NSNotFound ) {
        [[UIApplication sharedApplication] openURL:url];
       return NO;
}
else 
    return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];

Upvotes: 19

Nasser Al-Hadhrami
Nasser Al-Hadhrami

Reputation: 61

if you want to open an external url in safari, I think this is useful:
This is the %100 guaranteed solution if you are using phonegap - Tested in ios6.
to open external url in safari do following:

1-add your link in External Host (white list). e.g http://google.com
2-in Cordova.plist or Phonegap.plist, change "OpenAllWhitelistURLsInWebView" from "Yes" to "No"
3-in your application add (target="_blank") to your link
example 

    <a href="http://google.com" target="_blank">Google.com</a>


Thank you.

Upvotes: 0

adamdehaven
adamdehaven

Reputation: 5920

This is what works for me based on the answer by @TDeBailleul. Basically, any link that has a suffix of PDF, OR if it is a specific page I want to open in Safari, OR if it is not a page within www.example.com/* (an external link) it will open in a new window: 

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

    // Open PDF files, Specific Pages, and External Links (not beginning with http://www.example.com) in Safari.app
    if (
        (navigationType == UIWebViewNavigationTypeLinkClicked) && 
        ([[[request URL] absoluteString] hasSuffix:@"pdf"] || [[[request URL] absoluteString] hasPrefix:@"http://www.example.com/specific-page.php"] || ![[[request URL] absoluteString] hasPrefix:@"http://www.example.com"])
        ) { 

        [[UIApplication sharedApplication] openURL:request.URL];
        return NO;
    } 

    return YES;
}

Hope this helps others!

Upvotes: 9

Dan
Dan

Reputation: 87

You can (as of phonegap 1.5.0) use :

<a href="some://external/url" target="_blank">Click Me</a>

This should cause phonegap to launch the native browser.

I think what user868766 was referring to was that for the above to work you need the external url to be on the whitelist. The app I have been working on opened the source of news stories in the native browser so we used * in the whitelist to ensure we didnt rule out any sources.

Hope that helps.

Upvotes: 7

Related Questions