phonegap membuka tautan di browser


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

hai para ahli saya menggunakan phonegap 2.9.0 dan saya menggunakan kode di atas untuk membuka tautan di browser tetapi membukanya di aplikasi yang sama ...... bagaimana cara membukanya di browser safari?

itu membuka situs web di aplikasi yang sama dan kemudian saya tidak dapat kembali ke aplikasi, jadi saya perlu menghapus aplikasi dan menginstalnya lagi .....


Jika Anda ingin membuka _blankbrowser eksternal dan _selfWebView, periksa solusi 2015 saya untuk Cordova 5.1.1: stackoverflow.com/a/32227524/82609
Sebastien Lorber

Lihat juga jawaban dalam pertanyaan serupa: stackoverflow.com/a/26176013/1480587 dan stackoverflow.com/a/46619378/1480587
Peter

Jawaban:


225

Seperti yang disarankan dalam pertanyaan serupa , gunakan JavaScript untuk memanggil window.opendengan targetargumen yang disetel ke _system, sesuai dengan dokumentasi InAppBrowser :

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

Ini seharusnya berfungsi, meskipun solusi yang lebih baik dan lebih fleksibel adalah dengan mencegat semua clickperistiwa tautan , dan memanggil window.opendengan argumen yang dibaca dari atribut tautan.

Ingat Anda harus menginstal plugin InAppBrowser agar ini berfungsi:

cordova plugin add cordova-plugin-inappbrowser

3
ya, saya juga menggunakan target yang sama = "_ blank" di cordova 1.7.0 tetapi sekarang saya bekerja dengan 2.9.0 dan itu mengganggu saya, sujjestion Anda juga tidak berfungsi ...... :(
ahsan ali

6
ya saya mencobanya juga dan mengikuti tautan yang Anda bagikan, terima kasih atas bantuan Anda tetapi masalahnya masih ada, situs masih terbuka di aplikasi ...... :(
ahsan ali

hai ahsan, maukah Anda menjelaskan tentang masalah Anda? Saya pikir saya mungkin mengalami masalah yang sama.
whossname

3
Ingat Anda harus menginstal plugin InAppBrowser agar ini berfungsi, instruksi di sini: cordova.apache.org/docs/en/3.0.0/…
jackocnr

7
Saya memiliki masalah yang sama .. solusinya tidak berfungsi :( terbuka hanya sebagai tautan biasa (di android)
Daniel

30

Seperti yang dijawab di posting lain, Anda memiliki dua opsi berbeda untuk platform berbeda. Yang saya lakukan adalah:

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
    }
}

Jadi seperti yang Anda lihat, saya memeriksa platform perangkat dan bergantung pada itu saya menggunakan metode yang berbeda. Dalam kasus browser standar, saya meninggalkan perilaku standar. Mulai sekarang, solusinya akan berfungsi dengan baik di Android, iOS, dan browser, sementara halaman HTML tidak akan diubah, sehingga URL dapat direpresentasikan sebagai jangkar standar

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

Solusinya membutuhkan InAppBrowser dan plugin Perangkat


Jawaban yang sangat bagus. Untuk berjaga-jaga jika tidak untuk orang lain, pastikan www / cordova_plugins.js Anda memiliki perangkat dan konfigurasi browser yang disertakan. Ketika saya menginstal plugin, itu menambahkan konfigurasi js & plugins ke folder pementasan dan bukan folder www kerja utama saya. Setelah saya memilah konfigurasi dan lokasi, ini bekerja dengan sempurna.
Michael Bordash

1
Ini jawaban terbaik! Harap diingat Anda tidak menginstal plugin InAppBrowser melalui:$ meteor add cordova:org.apache.cordova.inappbrowser@0.5.4
tixastronauta

Jika ada yang ingin berkontribusi pada potongan tersebut, saya mengunggahnya ke intinya. gist.github.com/redolent/e79722b32a48a536b5ba
harum

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

Bekerja untuk saya dengan android & PG 3.0


Sepertinya masih gagal bagi saya pada keduanya, Android 2.3.7 dan 4.2.2.
pengguna569825

2
Bekerja untuk saya di Android 4.4.2 dengan Cordova 3.3.0. Tetapi tidak berfungsi di iOS 6.1.
ahli mitos

Bekerja untuk saya cordova 3.3.0, terima kasih, dan dari mana Anda mendapatkan informasi ini? Tidak dapat menemukan di dokumentasi.
Teoman shipahi

Ini bekerja untuk saya dengan cordova 3.4.1 dan android 4.2. Saya tidak membutuhkan plugin. Saya akan melaporkan kembali setelah pengujian di iOS7.
halaman mulai

Ini adalah satu-satunya solusi yang berhasil untuk saya di android, terima kasih
Niraj Chauhan

21

Ada 2 cara berbeda untuk membuka URL di android dan iphone.

UNTUK IOS gunakan kode berikut.

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

dan untuk OS android gunakan kode berikut.

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

Cordova juga bisa digunakan window.open("http://google.com", '_system'). Anda tidak boleh menggunakan navigator.app.loadUrl, karena itu tidak akan berfungsi dengan market://URL: dalam kasus ini, itu hanya akan menutup aplikasi Anda dan membuka di jendela yang sama .. tidak selalu lebih disukai.
Agamemnus

1
Agamemnus, window.open tidak berfungsi pada android di aplikasi phonegap 3.6 saya. Saya perlu menggunakan solusi dalam jawaban ini, untuk membuatnya berhasil.
Moulde

10

Akhirnya posting ini membantu saya di iOS: http://www.excellentwebworld.com/phonegap-open-a-link-in-safari-or-external-browser/ .

Buka file "CDVwebviewDelegate.m" dan cari "shouldStartLoadWithRequest", lalu tambahkan kode ini ke awal fungsi:

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

Saat menggunakan navigator.app.loadUrl("http://google.com", {openExternal : true});untuk Android tidak masalah.

Melalui Cordova 3.3.0.


Ini adalah satu-satunya hal yang berhasil untuk saya di 3.0.0. Terima kasih!!
Rocklan

Di 3.0 Anda perlu menyertakan plugin InAppBrowser. Betapapun anehnya hal itu.
Sean Bannister

Saya akan mengubahnya satu lapisan di atasnya di MainViewController.m: - (BOOL) webView: (UIWebView *) theWebView shouldStartLoadWithRequest: (NSURLRequest *) request navigationType: (UIWebViewNavigationType) navigationType {NSURL * url = [request URL]; if ([[skema url] isEqualToString: @ "file"] || [[skema url] isEqualToString: @ "gap"]) {return [super webView: theWebView shouldStartLoadWithRequest: request navigationType: navigationType]; } lain {[[UIApplication sharedApplication] openURL: url]; kembali TIDAK; }}
Gamadril

10

Tidak satu pun dari jawaban ini yang cukup eksplisit untuk membuka tautan eksternal di setiap platform. Sesuai dokumen inAppBrowser :

Install

cordova plugin add cordova-plugin-inappbrowser

Timpa window.open (opsional, tetapi disarankan untuk kesederhanaan)

window.open = cordova.InAppBrowser.open;

Jika Anda tidak menimpa window.open, Anda akan menggunakan window.openfungsi native , dan tidak dapat mengharapkan untuk mendapatkan hasil yang sama lintas platform.

Gunakan untuk membuka link di browser default

window.open(your_href_value, '_system');

Perhatikan bahwa target untuk inAppBrowser (yang disarankan oleh nama plugin untuk digunakan) adalah '_blank', bukan '_system'.


Tanpa langkah-langkah di atas, saya tidak bisa mendapatkan tautan untuk dibuka di aplikasi browser default lintas platform.

Kredit tambahan

Berikut adalah contoh handler klik (langsung) untuk link:

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

Di mana tepatnya Anda mengganti window.open? Di situs web atau aplikasi
cordova

Lebih disukai bagian atas file JavaScript Anda yang Anda muat ke halaman index.html Anda (situs web Anda, jika itu membantu)
bozdoz

7

Jika Anda kebetulan memiliki jQuery, Anda dapat menghentikan klik pada tautan seperti ini:

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

Dengan cara ini Anda tidak perlu mengubah tautan di html, yang dapat menghemat banyak waktu. Saya telah menyiapkan ini menggunakan delegasi, itulah mengapa Anda melihatnya terikat ke objek dokumen, dengan tag 'a' sebagai argumen kedua. Dengan cara ini semua tag 'a' akan ditangani, kapan pun tag tersebut ditambahkan.

Tentu Anda masih harus menginstal plugin InAppBrowser:

cordova plugin add org.apache.cordova.inappbrowser

ini adalah ide bagus yang akan saya gunakan tetapi Anda juga harus menjaga jendela langsung. panggilan terbuka (tidak semuanya melalui tautan)
Sebastien Lorber

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

Akan berfungsi, tetapi hanya jika Anda telah menginstal plugin browser aplikasi. Untuk menginstal, menggunakan terminal, telusuri folder www di proyek Anda dan ketik:

phonegap plugin add org.apache.cordova.inappbrowser

atau

cordova plugin add org.apache.cordova.inappbrowser

Kemudian tautan Anda akan terbuka di browser.


Perintah phonegap local <command>telah DIHENTIKAN. Perintah telah didelegasikan ke phonegap <command>. Perintah tersebut phonegap local <command>akan segera dihapus.
Ajay Suwalka

Dulu saya tidak tahu, tapi sekarang cara yang benar untuk menginstal plugin ini adalah cordova plugin add cordova-plugin-inappbrowser.
Plinio FM

2

Dengan Cordova 5.0 dan yang lebih baru, plugin InAppBrowser diganti namanya di registri plugin Cordova, jadi Anda harus menginstalnya menggunakan

cordova plugin add cordova-plugin-inappbrowser --save

Kemudian gunakan

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


1

Saya menggunakan PhoneGap Build (v3.4.0), dengan fokus pada iOS, dan saya perlu memiliki entri ini di config.xml saya untuk PhoneGap untuk mengenali plug-in InAppBrowser.

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

Setelah itu, menggunakan window.open (url, target) akan bekerja seperti yang diharapkan, seperti yang didokumentasikan di sini .


1
Saya m also using PhoneGap Build (v3.5.x) and added the plugin via the config.xml. But what i get is an InAppBrowser without controls an cannot call the safari browser. Ihanya menggunakan window.open (). Ada saran?
Reinos

Jika sudah diatur dengan benar, window.open seharusnya berfungsi. Dalam situasi saya, window.open membuka url browser lain, dan berfungsi dengan baik. Pastikan URL-nya baik-baik saja.
contactmatt

Saya baru saja mencoba ini dengan Phonegap Build & Terjadi error dengan: "plugin unsupported: org.apache.cordova.inappbrowser"
David Ball

1

Saya juga menghadapi masalah bahwa tautan tidak terbuka di browser di sini adalah perbaikan saya dengan langkah-langkah:

1: Instal plugin cordova ini.

cordova plugin add cordova-plugin-inappbrowser

2: tambahkan tautan terbuka di html seperti berikut.

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

3: ini adalah langkah yang paling penting karena ini saya menghadapi banyak masalah: unduh cordova.jsfile dan tempelkan di wwwfolder. Kemudian buat referensi tentang ini di index.htmlfile.

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

Solusi ini akan bekerja untuk lingkungan android dan iPhone.


-2

Seperti ini :

<a href="#" onclick="window.open('https://www.nbatou.com', '_system'); return false;">https://www.nbatou.com</a>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.