cordova - फोनगैप: डिफ़ॉल्ट ब्राउज़र में खुला बाहरी लिंक(ऐप के बाहर)




phonegap-plugins phonegap-build (10)

IOs के लिए, आपके MainViewController.m में निम्न कार्य करें

- (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]; 
}

संपादित करें: Android के लिए, CordovaWebViewClient.java में, चाहिएऑवरराइडउर्ल लोडिंग में निम्न कार्य करें:

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

मैं फोनगैप एप्लिकेशन से सफारी (आईफोन पर) में लिंक खोलने की कोशिश कर रहा हूं। मैं फोनगैप संस्करण 3.1.0 का उपयोग कर रहा हूं, और एप्लिकेशन बनाने के लिए फोनगैप बिल्ड का उपयोग कर रहा हूं।

मेरे पास पृष्ठ पर दो लिंक हैं (www / index.html में नीचे दिखाए गए हैं)। दोनों लिंक फोनगैप एप्लिकेशन के अंदर खुलते हैं। मैं देख सकता हूं कि फोनगैप सही ढंग से लोड हो गया है, क्योंकि अलर्ट ('डिवाइस तैयार है!'); शुरू हो रहा है।

डिफ़ॉल्ट ब्राउज़र (ऐप के बाहर) में लिंक खोलने के लिए मुझे क्या बदलने की ज़रूरत है?

Www / config.xml फ़ाइल इस तरह दिखती है:

<?xml version="1.0" encoding="UTF-8"?>

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.company.appname" version="0.0.3">
  <name>AppName</name>
  <description>description</description>
  <author href="http://www.example.com/" email="[email protected]">
    Company
  </author>
  <preference name="phonegap-version" value="3.1.0" />
  <preference name="orientation" value="portrait" />
  <preference name="stay-in-webview" value="false" />

  <gap:plugin name="org.apache.cordova.inappbrowser" version="0.2.3" />
  <gap:plugin name="org.apache.cordova.dialogs" version="0.2.2" />
  <gap:plugin name="com.phonegap.plugins.pushplugin" version="2.0.5" />

  <plugins>
    <plugin name="InAppBrowser" value="CDVInAppBrowser" />
  </plugins>

  <feature name="InAppBrowser">
    <param name="ios-package" value="CDVInAppBrowser" />
  </feature>
  <access origin="*" />
</widget>

Www / index.html फ़ाइल इस तरह दिखती है:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <title>Test application</title>
</head>
<body>
  <a href="#" onclick="openUrl('http://www.google.com/'); return false;">Link test 1</a>
  <a href="#" onclick="window.open('http://www.google.com/', '_system', 'location=yes'); return false;">Test link 2</a>

  <script src="phonegap.js"></script>
  <script src="cordova.js"></script>
  <script src="js/jquery-1.9.1.js"></script>
  <script type="text/javascript">
    function openUrl(url) {
      alert("open url: " + url);
      window.open(url, '_blank', 'location=yes');
    }

    function onDeviceReady() {
      alert('device ready!');
    }
    $(function() {
        document.addEventListener("deviceready", onDeviceReady, true);
    });
  </script>
</body>
</html>

परियोजना संरचना यहां दी गई है:

├── platforms
├── plugins
│   └── org.apache.cordova.inappbrowser
│       ├── LICENSE
│       ├── package.json
│       ├── plugin.xml
│       ├── README.md
│       ├── RELEASENOTES.md
│       ├── src
│       │   ├── android
│       │   │   ├── InAppBrowser.java
│       │   │   └── InAppChromeClient.java
│       │   ├── blackberry10
│       │   │   └── README.md
│       │   ├── ios
│       │   │   ├── CDVInAppBrowser.h
│       │   │   └── CDVInAppBrowser.m
│       │   └── wp
│       │       └── InAppBrowser.cs
│       └── www
│           ├── InAppBrowser.js
│           └── windows8
│               └── InAppBrowserProxy.js
├── README.md
└── www
    ├── config.xml
    ├── cordova.js
    ├── index.html
    ├── js
    │   └── jquery-1.9.1.js
    └── phonegap.js

config.xml संपादित करें प्लगइन एंट्री पर स्रोत = "एनपीएम" जोड़ें। '<' गैप: प्लगइन नाम = "org.apache.cordova.inappbrowser" स्रोत = "एनपीएम"> '


इस उदाहरण के साथ कोशिश करें।

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


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

अगर आप फोनगैप संस्करण 3.1 या ऊपर का उपयोग कर रहे हैं तो config.xml में नीचे पंक्ति जोड़ें

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

इस तरह मैंने कॉर्डोवा / फोनगैप 3.6.3 में हल किया

Inappbroswer cordova प्लगइन स्थापित करें:

cordova plugin add org.apache.cordova.inappbrowser

मैं अपने फोनगैप ऐप को एक मानक वेब पेज के समान जितना संभव रखना चाहता था: मैं चाहता था कि एक लिंक पर लक्ष्य = "_ खाली" हो, यह बाहरी पृष्ठ में खुल जाएगा।

इस तरह मैंने इसे कार्यान्वित किया:

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

तो मुझे बस इतना करना है कि निम्न जैसे लिंक का उपयोग करें

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

इस बारे में कैसा है?

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

संपादित करें:

यह संबंधित हो सकता है: ऑनक्लिक ईवेंट में एकाधिक जावास्क्रिप्ट फ़ंक्शंस को कैसे कॉल करें?

मैं सोच रहा था, इसके बारे में कैसे:

कोड में जोड़ें:

$(".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');
});

फिर:

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

उन लोगों के लिए जिन्होंने इसे मूल प्रश्न में नहीं देखा है, आपको यह भी सुनिश्चित करना होगा कि जिस यूआरएल को आप खोलने की कोशिश कर रहे हैं उसे आपके config.xml में एक्सेस टैग जोड़कर श्वेतसूची नहीं है:

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

या आप कर सकते हैं

<access origin="*" />

कुछ भी अनुमति देने के लिए


मैं कॉर्डोवा 6.0 का उपयोग कर रहा हूं, मेरा समाधान यहां है:

1: इस कॉर्डोवा प्लगइन स्थापित करें।

cordova plugin add cordova-plugin-inappbrowser

2: एचटीएमएल में खुले लिंक को निम्नलिखित की तरह जोड़ें।

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

3: इस वजह से यह सबसे आयातक कदम है मुझे बहुत सारी समस्याएं आ रही हैं: cordova.js फ़ाइल डाउनलोड करें और इसे www फ़ोल्डर में पेस्ट www । फिर index.html फ़ाइल में इसका संदर्भ लें।

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

यह समाधान पर्यावरण एंड्रॉइड और आईफोन दोनों के लिए काम करेगा।


मैंने एक वेब ऐप में काम करने के लिए पास्टुल्लो के जवाब को भी अनुकूलित किया जो कि कॉर्डोवा इनएपब्रोसर में खोला जा सकता है, लेकिन यह भी सादा वेब-ऐप (उदाहरण के लिए परीक्षण के लिए):

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', '');
}


This आईओएस पर मेरे लिए पूरी तरह से काम किया।

जैसा कि ऊपर दिए गए लिंक में बताया गया है:

1- कमांड का उपयोग कर प्लगइन स्थापित करें:

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

2- और एचटीएमएल फ़ाइल में, आवश्यकतानुसार निम्न में से एक का उपयोग करें:

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 






inappbrowser