program story

브라우저에서 phonegap 열린 링크

inputbox 2020. 7. 24. 20:52
반응형

브라우저에서 phonegap 열린 링크


<a target="_blank" data-rel="external" href="http://www.kidzout.com">www.kidzout.com</a>

안녕하세요 전문가 phonegap 2.9.0을 사용하고 있으며 브라우저에서 링크를 열기 위해 위의 코드를 사용하고 있지만 동일한 응용 프로그램에서 링크를 엽니 다 ... 어떻게 Safari 브라우저를 열 수 있습니까?

그것은 같은 응용 프로그램에서 웹 사이트를 연 다음 응용 프로그램으로 돌아올 수 없으므로 응용 프로그램을 삭제하고 다시 설치해야합니다 .....


비슷한 질문 에서 제안한 대로 InAppBrowser 설명서에 따라 JavaScript를 사용 window.open하여 target인수를로 설정하여 호출 합니다 ._system

<a href="#" onclick="window.open('http://www.kidzout.com', '_system'); return false;">www.kidzout.com</a>

더 효과적이고 유연한 솔루션은 모든 링크의 click이벤트 를 가로 채고 window.open링크의 속성에서 읽은 인수로 호출 하는 것이 좋습니다.

이 기능을 사용하려면 InAppBrowser 플러그인을 설치해야합니다.

cordova plugin add cordova-plugin-inappbrowser

다른 게시물에서 대답했듯이 플랫폼마다 다른 두 가지 옵션이 있습니다. 내가하는 일은 :

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {

    // Mock device.platform property if not available
    if (!window.device) {
        window.device = { platform: 'Browser' };
    }

    handleExternalURLs();
}

function handleExternalURLs() {
    // Handle click events for all external URLs
    if (device.platform.toUpperCase() === 'ANDROID') {
        $(document).on('click', 'a[href^="http"]', function (e) {
            var url = $(this).attr('href');
            navigator.app.loadUrl(url, { openExternal: true });
            e.preventDefault();
        });
    }
    else if (device.platform.toUpperCase() === 'IOS') {
        $(document).on('click', 'a[href^="http"]', function (e) {
            var url = $(this).attr('href');
            window.open(url, '_system');
            e.preventDefault();
        });
    }
    else {
        // Leave standard behaviour
    }
}

보시다시피 장치 플랫폼을 확인하고 있으며 다른 방법을 사용하고 있습니다. 표준 브라우저의 경우 표준 동작을 그대로 둡니다. 이제부터 솔루션은 Android, iOS 및 브라우저에서 잘 작동하지만 HTML 페이지는 변경되지 않으므로 URL이 표준 앵커로 표시 될 수 있습니다

<a href="http://stackoverflow.com">

이 솔루션에는 InAppBrowser 및 Device 플러그인이 필요합니다


<a onclick="navigator.app.loadUrl('https://google.com/', { openExternal:true });">Link</a>

Android 및 PG 3.0에서 작동합니다.


안드로이드와 아이폰에서 URL을 여는 방법은 2 가지가 있습니다.

iOS의 경우 다음 코드를 사용하십시오.

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

안드로이드 OS의 경우 다음 코드를 사용하십시오.

navigator.app.loadUrl("http://google.com", {openExternal : true});

마침내이 게시물은 iOS에서 나를 도와줍니다 : http://www.excellentwebworld.com/phonegap-open-a-link-in-safari-or-external-browser/ .

Open "CDVwebviewDelegate.m" file and search "shouldStartLoadWithRequest", then add this code to the beginning of the function:

if([[NSString stringWithFormat:@"%@",request.URL] rangeOfString:@"file"].location== NSNotFound) {
    [[UIApplication sharedApplication] openURL:[request URL]];
    return NO;
}

While using navigator.app.loadUrl("http://google.com", {openExternal : true}); for Android is OK.

Via Cordova 3.3.0.


None of these answers are explicit enough to get external links to open in each platform. As per the inAppBrowser docs:

Install

cordova plugin add cordova-plugin-inappbrowser

Overwrite window.open (optional, but recommended for simplicity)

window.open = cordova.InAppBrowser.open;

If you don't overwrite window.open, you will be using the native window.open function, and can't expect to get the same results cross-platform.

Use it to open links in default browser

window.open(your_href_value, '_system');

Note that the target for the inAppBrowser (which is what the plugin name suggests it is to be used for) is '_blank', instead of '_system'.


Without the steps above, I was not able to get links to open in the default browser app cross-platform.

Extra credit

Here's an example (live) click handler for the links:

document.addEventListener('click', function (e) {
    if (e.target.tagName === 'A' &&
        e.target.href.match(/^https?:\/\//)) {
        e.preventDefault();
        window.open(e.target.href, '_system');
    }
});

If you happen to have jQuery around, you can intercept the click on the link like this:

$(document).on('click', 'a', function (event) {
    event.preventDefault();
    window.open($(this).attr('href'), '_system');
    return false;
});

This way you don't have to modify the links in the html, which can save a lot of time. I have set this up using a delegate, that's why you see it being tied to the document object, with the 'a' tag as the second argument. This way all 'a' tags will be handled, regardless of when they are added.

Ofcourse you still have to install the InAppBrowser plug-in:

cordova plugin add org.apache.cordova.inappbrowser

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

Will work but only if you have the inappbrowser plugin installed. To install, using terminal, browse to the www folder in your project and type:

phonegap plugin add org.apache.cordova.inappbrowser

or

cordova plugin add org.apache.cordova.inappbrowser

Then it your link will open in the browser.


With Cordova 5.0 and greater the plugin InAppBrowser is renamed in the Cordova plugin registry, so you should install it using

cordova plugin add cordova-plugin-inappbrowser --save

Then use

<a href="#" onclick="window.open('http://www.kidzout.com', '_system');">www.kidzout.com</a>


I'm using PhoneGap Build (v3.4.0), with focus on iOS, and I needed to have this entry in my config.xml for PhoneGap to recognize the InAppBrowser plug-in.

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

After that, using window.open(url, target) should work as expected, as documented here.


I also faced the issue that link was not opening on browser here is my fix with steps:

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.


Like this :

<a href="#" onclick="window.open('https://www.nbatou.com', '_system'); return false;">https://www.nbatou.com</a>

참고URL : https://stackoverflow.com/questions/17887348/phonegap-open-link-in-browser

반응형