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

Question

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

Did you get any error on console? – Littm Oct 14 '12 at 23:35 — Littm, Oct 14 '12 at 23:35

score 1 · Answer 1 · answered Nov 05 '12 at 15:29

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

Hadn't seen this solution elsewhere. Thanks! – Bob Spryn Nov 28 '12 at 00:08 — Bob Spryn, Nov 28 '12 at 00:08

score 0 · Answer 2 · answered Nov 02 '12 at 20:10

0

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.

answered Nov 02 '12 at 20:10

sonjz

4,870
3
42
60

Thanks für the advice, but there are no whitelist rejections. I have set an Asterisk in Externalhosts, so that all requests are allowed. I think there is a mistake somewhere in my code, but i dont get any errors in the console. I would be happy, if it would be a rejection, but i will check the log you mentioned. – Kieke Nov 07 '12 at 12:54
@Kieke, check the answer above, it shows you how to manually open a Safari window given an if-condition. No plug-in required. – sonjz Nov 07 '12 at 15:22

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

2 Answers2