phonegap เปิดลิงค์ในเบราว์เซอร์


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

เฮ้ผู้เชี่ยวชาญฉันใช้ phonegap 2.9.0 และฉันใช้รหัสด้านบนเพื่อเปิดลิงค์ในเบราว์เซอร์ แต่เปิดขึ้นในแอพเดียวกัน ...... จะเปิดเบราว์เซอร์ซาฟารีได้อย่างไร?

มันเปิดเว็บไซต์ในแอพเดียวกันจากนั้นฉันไม่สามารถกลับมาที่แอพได้ฉันจึงต้องลบแอพและติดตั้งอีกครั้ง .....


หากคุณต้องการเปิด_blankเบราว์เซอร์ภายนอกและ_selfไปที่ WebView ให้ตรวจสอบโซลูชันปี 2015 ของฉันสำหรับ Cordova 5.1.1: stackoverflow.com/a/32227524/82609
— Sebastien Lorber

ดูคำตอบในคำถามที่คล้ายกัน: stackoverflow.com/a/26176013/1480587และstackoverflow.com/a/46619378/1480587
— Peter T.

คำตอบ:


225

ตามที่แนะนำในคำถามที่คล้ายกันให้ใช้ JavaScript เพื่อเรียกwindow.openด้วยtargetอาร์กิวเมนต์ที่ตั้งค่า_systemเป็นตามเอกสาร InAppBrowser :

<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

3
ใช่ฉันก็ใช้เป้าหมายเดียวกัน = "_ blank" ใน Cordova 1.7.0 แต่ตอนนี้ฉันทำงานกับ 2.9.0 และมันทำให้ฉันรำคาญ sujjestion ของคุณเช่นกันใช้ไม่ได้ ...... :(
— ahsan ali

6
ใช่ฉันลองทำเช่นนั้นและติดตามลิงก์ที่คุณแชร์ด้วยขอบคุณสำหรับความช่วยเหลือของคุณ แต่ปัญหายังคงอยู่ที่นั่นไซต์ยังคงเปิดอยู่ในแอป ...... :(
— ahsan ali

เฮ้อาซานคุณช่วยอธิบายให้ละเอียดได้ไหมว่าปัญหาของคุณคืออะไร ฉันคิดว่าฉันอาจจะมีปัญหาเดียวกัน
— whossname

3
จำไว้ว่าคุณต้องติดตั้งปลั๊กอิน InAppBrowser เพื่อให้ใช้งานได้คำแนะนำที่นี่: cordova.apache.org/docs/en/3.0.0/…
— jackocnr

7
ฉันมีปัญหาเดียวกัน .. วิธีแก้ปัญหาใช้งานไม่ได้ :( มันเปิดเป็นลิงค์ปกติ (บน Android)
— Daniel

30

ตามที่ตอบไว้ในโพสต์อื่น ๆ คุณมีสองตัวเลือกที่แตกต่างกันสำหรับแพลตฟอร์มต่างๆ สิ่งที่ฉันทำคือ:

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


คำตอบที่ยอดเยี่ยม ในกรณีที่ไม่เหมาะสำหรับผู้อื่นตรวจสอบให้แน่ใจว่า www / cordova_plugins.js ของคุณมีทั้งอุปกรณ์และการกำหนดค่าที่ไม่เหมาะสมรวมอยู่ด้วย เมื่อฉันติดตั้งปลั๊กอินจะเพิ่มการกำหนดค่า js & plugins ลงในโฟลเดอร์ staging ไม่ใช่โฟลเดอร์ www ที่ใช้งานได้ เมื่อฉันเรียงลำดับการกำหนดค่าและตำแหน่งแล้วสิ่งนี้ก็ทำงานได้อย่างสมบูรณ์
— Michael Bordash

1
นี่คือคำตอบที่ดีที่สุด! โปรดจำไว้ว่าคุณไม่ได้ติดตั้งปลั๊กอิน InAppBrowser ผ่าน:$ meteor add cordova:org.apache.cordova.inappbrowser@0.5.4
— tixastronauta

หากใครต้องการมีส่วนร่วมในตัวอย่างข้อมูลฉันอัปโหลดไปยังส่วนสำคัญ gist.github.com/redolent/e79722b32a48a536b5ba
— กลิ่นหอม

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

ใช้งานได้กับ Android & PG 3.0


ดูเหมือนว่าจะยังคงล้มเหลวสำหรับฉันในทั้ง Android 2.3.7 และ 4.2.2
— user569825

2
ใช้ได้กับฉันบน Android 4.4.2 กับ Cordova 3.3.0 แต่ไม่ทำงานบน iOS 6.1
— mytharcher

ใช้ได้กับฉัน Cordova 3.3.0 ขอบคุณและคุณได้ข้อมูลนี้มาจากไหน ไม่พบในเอกสาร
— Teoman shipahi

สิ่งนี้ใช้ได้กับฉันกับ Cordova 3.4.1 และ android 4.2 ฉันไม่ต้องการปลั๊กอิน ฉันจะรายงานกลับหลังจากทดสอบบน iOS7
— pgsandstrom

นี่เป็นทางออกเดียวที่ใช้ได้กับฉันบน Android ขอบคุณ
— Niraj Chauhan

21

มี 2 ​​วิธีในการเปิด URL ใน Android และ iPhone

สำหรับ IOS ใช้รหัสต่อไปนี้

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

และสำหรับระบบปฏิบัติการ Android ใช้รหัสต่อไปนี้

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

Cordova window.open("http://google.com", '_system')ก็ใช้ได้เช่นกัน คุณไม่ควรใช้navigator.app.loadUrlเพราะมันใช้ไม่ได้กับmarket://URL: ในกรณีนี้แอปของคุณจะปิดและเปิดในหน้าต่างเดียวกัน .. ไม่ดีกว่าเสมอไป
— Agamemnus

1
Agamemnus, window.open ไม่ทำงานบน Android ในแอปพลิเคชัน phonegap 3.6 ของฉัน ฉันต้องใช้วิธีแก้ปัญหาในคำตอบนี้เพื่อให้มันใช้งานได้
— Moulde

10

ที่ล่าสุดโพสต์นี้ช่วยให้ผมบน iOS: http://www.excellentwebworld.com/phonegap-open-a-link-in-safari-or-external-browser/

เปิดไฟล์ "CDVwebviewDelegate.m" และค้นหา "shouldStartLoadWithRequest" จากนั้นเพิ่มรหัสนี้ที่จุดเริ่มต้นของฟังก์ชัน:

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

ในขณะที่ใช้navigator.app.loadUrl("http://google.com", {openExternal : true});สำหรับ Android ก็ใช้ได้

ผ่าน Cordova 3.3.0


นี่เป็นสิ่งเดียวที่ใช้ได้ผลสำหรับฉันใน 3.0.0 ขอบคุณ!!
— Rocklan

ใน 3.0 คุณต้องรวมปลั๊กอิน InAppBrowser อย่างไรก็ตามเรื่องแปลกที่อาจดูเหมือน
— Sean Bannister

ฉันจะเปลี่ยนหนึ่งชั้นด้านบนใน MainViewController.m: - (BOOL) webView: (UIWebView *) theWebView shouldStartLoadWithRequest: (NSURLRequest *) ขอ navigationType: (UIWebViewNavigationType) navigationType {NSURL * url = [ขอ URL]; if ([[url schema] isEqualToString: @ "file"] || [[url Scheme] isEqualToString: @ "gap"]) {return [super webView: theWebView shouldStartLoadWithRequest: request navigationType: navigationType]; } else {[[UIApplication sharedApplication] openURL: url]; กลับไม่; }}
— Gamadril

10

ไม่มีคำตอบใดที่ชัดเจนเพียงพอที่จะเปิดลิงก์ภายนอกในแต่ละแพลตฟอร์ม ตามเอกสาร inAppBrowser :

ติดตั้ง

cordova plugin add cordova-plugin-inappbrowser

เขียนทับ window.open (ไม่บังคับ แต่แนะนำเพื่อความเรียบง่าย)

window.open = cordova.InAppBrowser.open;

หากคุณไม่เขียนทับwindow.openคุณจะใช้window.openฟังก์ชันเนทีฟและไม่สามารถคาดหวังว่าจะได้ผลลัพธ์เดียวกันข้ามแพลตฟอร์ม

ใช้เพื่อเปิดลิงก์ในเบราว์เซอร์เริ่มต้น

window.open(your_href_value, '_system');

โปรดทราบว่าเป้าหมายสำหรับ inAppBrowser (ซึ่งเป็นสิ่งที่ชื่อปลั๊กอินที่แสดงให้เห็นก็คือการที่จะใช้สำหรับ) เป็นแทน'_blank''_system'


หากไม่มีขั้นตอนข้างต้นฉันไม่สามารถรับลิงก์เพื่อเปิดในแอปเบราว์เซอร์เริ่มต้นข้ามแพลตฟอร์มได้

สินเชื่อพิเศษ

นี่คือตัวอย่างตัวจัดการคลิก (สด) สำหรับลิงก์:

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

คุณแทนที่ window.open ที่ไหนกันแน่? ในเว็บไซต์หรือแอพ
— Cordova

โดยเฉพาะอย่างยิ่งด้านบนของไฟล์ JavaScript ของคุณที่คุณโหลดลงในหน้า index.html ของคุณ (เว็บไซต์ของคุณหากช่วยได้)
— bozdoz

7

หากคุณมี jQuery อยู่รอบ ๆ คุณสามารถสกัดกั้นการคลิกที่ลิงค์ดังนี้:

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

วิธีนี้ทำให้คุณไม่ต้องแก้ไขลิงก์ใน html ซึ่งจะช่วยประหยัดเวลาได้มาก ฉันได้ตั้งค่านี้โดยใช้ผู้รับมอบสิทธิ์นั่นคือเหตุผลที่คุณเห็นว่ามันเชื่อมโยงกับวัตถุเอกสารโดยมีแท็ก 'a' เป็นอาร์กิวเมนต์ที่สอง วิธีนี้จะจัดการแท็ก "a" ทั้งหมดไม่ว่าจะเพิ่มเมื่อใดก็ตาม

แน่นอนคุณยังต้องติดตั้งปลั๊กอิน InAppBrowser:

cordova plugin add org.apache.cordova.inappbrowser

นี่เป็นความคิดที่ดีที่ฉันจะใช้ แต่คุณควรดูแลหน้าต่างโดยตรงเปิดการโทร (ทุกอย่างไม่ผ่านลิงก์)
— Sebastien Lorber

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

จะใช้งานได้เฉพาะเมื่อคุณติดตั้งปลั๊กอินเวบเบราว์เซอร์ ในการติดตั้งโดยใช้เทอร์มินัลเรียกดูโฟลเดอร์ www ในโปรเจ็กต์ของคุณแล้วพิมพ์:

phonegap plugin add org.apache.cordova.inappbrowser

หรือ

cordova plugin add org.apache.cordova.inappbrowser

จากนั้นลิงก์ของคุณจะเปิดขึ้นในเบราว์เซอร์


คำสั่งphonegap local <command>ถูกเลิกใช้แล้ว phonegap <command>คำสั่งที่ได้รับมอบหมายให้ คำสั่งphonegap local <command>จะถูกลบออกในไม่ช้า
— Ajay Suwalka

ผมไม่ทราบว่าในอดีตที่ผ่านมา cordova plugin add cordova-plugin-inappbrowserแต่ในปัจจุบันที่ถูกต้องในการติดตั้งปลั๊กอินนี้คือ
— Plinio FM

2

ด้วย Cordova 5.0 ขึ้นไปปลั๊กอิน InAppBrowser จะถูกเปลี่ยนชื่อในรีจิสตรีปลั๊กอิน Cordova ดังนั้นคุณควรติดตั้งโดยใช้

cordova plugin add cordova-plugin-inappbrowser --save

จากนั้นใช้

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


1

ฉันใช้ PhoneGap Build (v3.4.0) โดยเน้นที่ iOS และฉันจำเป็นต้องมีรายการนี้ใน config.xml ของฉันสำหรับ PhoneGap เพื่อจดจำปลั๊กอิน InAppBrowser

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

หลังจากนั้นใช้ window.open (URL เป้าหมาย) ควรจะทำงานตามที่คาดไว้เป็นเอกสารที่นี่


1
ฉัน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. Iแค่ใช้ window.open () คำแนะนำใด ๆ?
— Reinos

หากตั้งค่าถูกต้อง window.open ก็น่าจะใช้ได้ ในสถานการณ์ของฉัน window.open กำลังเปิด URL ของเบราว์เซอร์อื่นและใช้งานได้ดี ตรวจสอบว่า URL นั้นใช้ได้
— contactmatt

ฉันเพิ่งลองใช้ Phonegap Build & มันเกิดข้อผิดพลาดกับ: "plugin unsupported: org.apache.cordova.inappbrowser"
— David Ball

1

ฉันยังประสบปัญหาที่ลิงก์ไม่เปิดบนเบราว์เซอร์นี่คือการแก้ไขของฉันด้วยขั้นตอน:

1: ติดตั้งปลั๊กอิน Cordova นี้

cordova plugin add cordova-plugin-inappbrowser

2: เพิ่มลิงค์เปิดใน html ดังต่อไปนี้

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

3: นี่เป็นขั้นตอนที่น่าประทับใจที่สุดเนื่องจากสิ่งนี้ฉันประสบปัญหามากมาย: ดาวน์โหลดcordova.jsไฟล์และวางลงในwwwโฟลเดอร์ จากนั้นทำการอ้างอิงสิ่งนี้ในindex.htmlไฟล์

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

โซลูชันนี้จะใช้ได้กับทั้ง Android และ iPhone


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.