CODEWITHSUNDEEP
iphonejquery-mobilephonegap-pluginscordova-2.0.0childbrowser
Kieke
Kieke

Reputation: 46

Call Childbrowser with target="_blank" / Cordova 2.0 / jQuery Mobile 1.2.0

I've built a Cordova 2.0 App for iOS with jQuery Mobile 1.2. Framework inside. I've successfully installed the Childbrowser plugin (in this version and with this guide. Thanks for the help from these nice guys at this point,

Now I can call the Childbrowser directly with an onclick event with this javascript in the head:

<script type="text/javascript">
  app.initialize();
  function launchCB() {
    if(window.plugins.childBrowser != null) {
      window.plugins.childBrowser.onLocationChange = function(loc){};
      window.plugins.childBrowser.onClose = function(){};
      window.plugins.childBrowser.onOpenExternal = function(){};
      window.plugins.childBrowser.showWebPage('http://www.google.de');
    } else {
      alert('not found');
    }
  }
</script>

OR directly with for example 

<a href="#" onclick="window.plugins.childBrowser.showWebPage('http://www.google.de');"> Google</a>

Now I want to open all links with the attribute target="_blank". Therefore I've found this thread and picked up the solution by Charlie Gorichanaz.

But when I start the application in the iPhone simulator, all I get is the sandclock or rather the spinning wheel of death of jQuery mobile.

I'm happy for every helpful advice, I never coded before this app. Here's my index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name = "format-detection" content = "telephone=no"/>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Cordova</title>
    <script type="text/javascript" src="cordova-2.0.0.js"></script>
    <script type="text/javascript" src="ChildBrowser.js"></script>
    <gap:plugin name="ChildBrowser" /> <!-- latest release -->
    <script type="text/javascript" charset="utf-8" src="EmailComposer.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
      app.initialize();
      function launchCB() {
        if(window.plugins.childBrowser != null) {
          window.plugins.childBrowser.onLocationChange = function(loc){};
          window.plugins.childBrowser.onClose = function(){};
          window.plugins.childBrowser.onOpenExternal = function(){};
          window.plugins.childBrowser.showWebPage('http://www.google.de');
        } else {
          alert('not found');
        }
      }
      /*
       var args;
       cordova.exec(null, null, "EmailComposer", "showEmailComposer", [args]);
     */
   </script>
   <!-- jQuery mobile -->
   <link type="text/css" rel="stylesheet" media="screen" href="jqm/jquery.mobile-1.2.0-alpha.1.min.css">
   <link type="text/css" rel="stylesheet" media="screen" href="jqm/Changes.css">
   <script type="text/javascript" src="jqm/jquery-1.7.2.min.js"></script>
   <script>
     // for using childbrowser to open pdf on remote sites
     $(document).bind( "mobileinit", function() {
       $.mobile.allowCrossDomainPages = true;
     }
   );
   // the function i want to implement
   $(document).bind("pageinit", function() {
     onDeviceReady();
   });
   function onDeviceReady() {
     var root = this;
     cb = window.plugins.childBrowser;
     if (cb != null) {
       $('a[target="_blank"]').click(function(event) {
         cb.showWebPage($(this).attr('href'));
         event.preventDefault();
         event.stopImmediatePropagation();
         return false;
       });
     }
   }
   // don't know is this thing is right in place...
   document.addEventListener("deviceready", onDeviceReady, false);
 </script>
 <script src="jqm/jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
<body>
  <section data-role="page" id="home" data-theme="a" data-position="fixed">
    <div data-role="header"> <!-- header -->
      <h1>Test</h1>
      <div style="position:absolute; top:0px; right:5px;">
        <a href="#about" data-transition="pop">
          <img src="images/schlange-sw.png" alt="Schlange">
        </a>
      </div>
    </div>
    <!-- /header -->
    <div data-role="content"> <!-- content -->
      <a id="domainbut" onclick='launchCB()'>Working </a>
      <a href="http://www.google.de/" target="_blank" data-role="button" data-inline="true"> not working </a>
    </div>
    <!-- content -->
    <div data-role="footer" data-theme="a" data-position="fixed"></div>
  </section>
  <section data-role="dialog" id="about" data-close-btn-text="Close This Dialog">
    <div data-role="header">
      <h1>Über</h1>
    </div>
    <div data-role="content">
      <h1 style="text-align: center;"></h1>
      <div align="center">
    </div>
    <p style="text-align: center;">The owner of this app</p>
    <button onclick="cordova.exec(null, null, 'EmailComposer', 'showEmailComposer', [args]);">Compose Email</button>
    <p>
      <a href="#home" data-role="button" data-rel="back">OK</a>
    </p>
  </div>
</section>
</body>
</html>

Thank you in advance.

Regards

Kieke

Upvotes: 2

Views: 1429

Answers (2)

sonjz
sonjz

Reputation: 5090

@Kieke, if you decide to do away with ChildBrowser, I found the following worked for me.

NOTE: Assuming you are using PhoneGap 2.x

In your Cordova.plist set OpenAllWhitelistURLsInWebView = YES and set your ExternalHosts list, * is fine. Anything you want the webview not to block (viewed in Safari or in the app) has to be in your ExternalHosts list.

In your MainViewController.m add the following code to the bottom, you can manually redirect any URL to Safari, see the if statement for www.loadDomainInSafari.com:

- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSURL *requestURL =[ [ request URL ] retain ];
    NSString *host = [ [ requestURL host] retain ];

    // if YES, directs to WebView
    // otherwise, takes OpenAllWhitelistURLsInWebView setting

    // if www.loadDomainInSafari.com, open in Safari by explictly stating NO.
    // otherwise take OpenAllWhitelistURLsInWebView setting of YES
    if ([host isEqualToString:@"www.loadDomainInSafari.com"]) {
        return ![ [ UIApplication sharedApplication ] openURL: [ requestURL autorelease] ];
    }
    [ requestURL release ];
    return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];
}

Upvotes: 1

sonjz
sonjz

Reputation: 5090

In your Cordova.plist, do you have OpenAllWhitelistURLsInWebView = YES and are all the domains (eg. www.google.com, localhost) you are connecting to are in your ExternalHosts list?

Look in the console of your Xcode debugger as @Littm describes, you will see if your link are being blocked because they aren't in the whitelist.

You can also check your system.log as well, tail /var/log/system.log for any errors after you execute.

Upvotes: 0

Related Questions