1. 技术文章
  2. PhoneGap: Open external link in default browser (outside the app)

PhoneGap: Open external link in default browser (outside the app)

由 纵然是瞬间 提交于 2019-11-28 08:58:01

This is how i solved in Cordova/Phonegap 3.6.3

Install the inappbroswer cordova plugin:

cordova plugin add org.apache.cordova.inappbrowser

I wanted to keep my phonegap app as similar as possible to a standard web page: I wanted that by having target="_blank" on a link, it would open in an external page.

This is how i implemented it:

$("a[target='_blank']").click(function(e){
  e.preventDefault();
  window.open($(e.currentTarget).attr('href'), '_system', '');
});

so all i have to do is use a link like the following

<a href="http://www.example.com" target="_blank">Link</a>
Red2678

How about this?

<a href="#" onclick="window.open(encodeURI('http://www.google.com/'), '_system')">Test link 2</a>

EDIT:

This may pertain: How to call multiple JavaScript functions in onclick event?

I was thinking, how about this:

Add to code:

$(".navLink").on('tap', function (e) {
    //Prevents Default Behavior 
    e.preventDefault();
    // Calls Your Function with the URL from the custom data attribute 
    openUrl($(this).data('url'), '_system');
});

then:

<a href="#" class="navLink" data-url="http://www.google.com/">Go to Google</a>

You should use the gap:plugin tag and the fully qualified id in your config.xml to install plugins:

<gap:plugin name="org.apache.cordova.inappbrowser" />

As documented here.

I am using the cordova 6.0, here is my solution:

1: Install this cordova plugin.

cordova plugin add cordova-plugin-inappbrowser

2: add the open link in the html like following.

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

3: this is the most importaint step due to this I faced lots of issue: download the cordova.js file and paste it in the www folder. Then make a reference of this in the index.html file.

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

This solution will work for both the environment android and iPhone.

try with this below example.

<a class="appopen" onClick="OpenLink();">Sign in</a>


<script>
function OpenLink(){
    window.open("http://www.google.com/", "_system");
}
</script>

add this Below line in config.xml if you are using PhoneGap Version 3.1 or above

<gap:plugin name="org.apache.cordova.inappbrowser" />
Jabel Márquez

I had the same problem that you and the solution was include phonegap.js file to the <head> in all the pages where I will use the InAppBrowser.

All your code it's ok! The only thing you need add is: <script src="phonegap.js"></script> in your <head> section on your index.html

This is a little weird because Phonegap in his plugin documentation section says:

"If a plugin utilizes the js-module element to direct cordova to load the plugin javascripts, then no <script> references will be necessary to load a plugin. This is the case for the core cordova plugins"

And InAppBrowser is a core cordova plugin. But for some strange reason don't work until you include it the phonegap.js file (at least in 0.3.3 version).

NOTE: I found a bug. Some people says that you have to include 3 files: phonegap.js, cordova.js and cordova_plugins.js. But when I include this 3 files my app works fine in iOS 7, but in iOS 6 ignore the use of the plugin (Using: Cordova 3.3.0 + Phonegap Build + InAppBrowser 0.3.3).

You can see more in my SO question.

Hope this can help you!

For iOs, in your MainViewController.m do the following

- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSURL *url = [request URL];
    if (![url isFileURL] && navigationType == UIWebViewNavigationTypeLinkClicked)
    {
        if ([[UIApplication sharedApplication] canOpenURL:url]) {
        [[UIApplication sharedApplication] openURL:url];
            return NO;
        }
    } 

    return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType]; 
}

EDIT: For Android, in CordovaWebViewClient.java, in shouldOverrideUrlLoading do the following:

public boolean shouldOverrideUrlLoading(WebView view, String url) {
          if(/*check if not external link*) {
            view.loadUrl(url);
          } else {
            //prepend http:// or https:// if needed
            Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
            startActivity(i);
          }
          return true;
        }

This worked perfectly for me on iOS.

As mentioned in the link above:

1- Install the plugin using the command: 

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

2- And in the HTML file, use one of the following as needed:

window.open(‘http://example.com’, ‘_system’);   Loads in the system browser 
window.open(‘http://example.com’, ‘_blank’);    Loads in the InAppBrowser
window.open(‘http://example.com’, ‘_blank’, ‘location=no’); Loads in the InAppBrowser with no location bar
window.open(‘http://example.com’, ‘_self’); Loads in the Cordova web view

Late answer but maybe it will be helpful for someone. So what I have in my working code in both iOS and Android application based on Cordova. To open external link in the default browser (Safari or Google):

1) Make sure that you have inAppBrowser plugin

cordova plugin add cordova-plugin-inappbrowser --save

2) Add to device.js

function openURL(urlString){
  let url = encodeURI(urlString);
  window.open(url, '_system', 'location=yes');
}

3) Create new link

<a href="#" onClick="openURL('http://www.google.com')">Go to Google</a>

This is how I got mine to work.

  1. In config.xml (phonegap) add <gap:plugin name="org.apache.cordova.inappbrowser" />
  2. My hrefs look as followed: <a onclick='window.open("http://link.com","_system", "location=yes")' href='javascript:void(0)' >link</a>
  3. Very important, what I was missing from the start, add the cordova script in your header: <script src="cordova.js"></script> I don't know why, but for me without it it don't work.

Hopefully that will help

Might be it having a PATH environment variable problem, try this link it may be help.

Apache Cordova Documentation

Phonegap/Cordova – How to link to external pages

edit config.xml Add source= "npm" at plugin entry.'<'gap:plugin name="org.apache.cordova.inappbrowser" source="npm" > '

I adapted pastullo's answer to work also in a WebApp that might be opened in a cordova InAppBrowser, but also als plain Web-App (e.g. for testing):

function initOpenURLExternally() {
    $("a[target='_blank'],a[target='_system']").each(function (i) {
        var $this = $(this);
        var href = $this.attr('href');
        if (href !== "#") {
            $this
                .attr("onclick", "openURLExternally(\"" + href + "\"); return false;")
                .attr("href", "#");
        }
    });
}

function openURLExternally(url) {
    // if cordova is bundeled with the app (remote injection plugin)
    log.trace("openURLExternally: ", url);
    if (typeof cordova === "object") {
        log.trace("cordova exists ... " + typeof cordova.InAppBrowser);
        if (typeof cordova.InAppBrowser === "object") {
            log.trace("InAppBrowser exists");
            cordova.InAppBrowser.open(url, "_system");
            return;
        }
    }

    // fallback if no cordova is around us:
    //window.open(url, '_system', '');
    window.open(url, '_blank', '');
}

Instead of target="_blank", use target="_system" for the links you wish to open in an external browser (outside of the app). Then when clicking these links, your device will switch from your app to the system's browser app (ie. Safari or Chrome) to open the link.

For those that didn't spot it in the original question you also need to make sure the URL you are trying to open isn't whitelisted by adding an access tag to your config.xml as follows:

<access origin="http://www.example.com" />

or you can do

<access origin="*" />

to allow anything

In case you are trying to open link in external web browser try using class="external" for Anchor tag.

<a class="external" href="www.google.com" >Link</a>

Hope this helps!

标签
cordova
phonegap-plugins
phonegap-build
inappbrowser
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!