Search code examples
androidcordovagoogle-custom-search

Google custom search problem from phonegap


I'm trying to create a PhoneGap application that in part, makes available a custom search engine. I've followed the instructions at Google and created the following HTML file that works fine in a desktop browser when accessed as file:///text.html. When I use it as the phone gap start page it renders fine. There is a text box and the "search" button. However when I press "Search" I get an "Application Error" on the Android device, saying "file:///google.com/cse?q=.... can not be found."

The CustomSearchControl injects some code into the page -- basically a form. I though I might be able to manipulate the DOM at the 'cse' element to fix the URL scheme but I don't see the google.com URL with Firebug.

Looking for a way to make the problem go away or work around it. Here is the html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX Search API Sample</title>
    <script src="https://www.google.com/jsapi?INSERT-YOUR-KEY"></script>
    <script type="text/javascript">
        google.load('search', '1');
        google.setOnLoadCallback(function(){
          var search = new google.search.CustomSearchControl('007447616601297022092:7nhsxzpy6ao').draw('cse');
        }, true);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="cse" style="width:100%;">Loading...</div>
  </body>
</html>

Solution

  • I was able to find a workaround for this after much trying of stuff...

    Though I'm not sure, I believe the root of the problem is that the Google script is seeing that it is being run from the local file system of the device and it mistakenly tries to submit the form into file:///.

    I'm using Sencha Touch on top of PhoneGap. I thought I might be able to use some of the dom and component access functions to manipulate the submit event. However Google's JS is nearly impenetrable after it's shortened. Even after deminification you have code like aob. omg.

    So I just punted and used an iframe within the Sencha app to pull down the script shown in the question above to the device. Some code from Conor Armstrong was very helpful for making it all work nicely in Sencha Touch.