javascriptgoogle-visualizationgoogle-loader

Why does google.load cause my page to go blank?

Well, this looks strange but I'm not able to find a solution.

Why in the world does this fiddle http://jsfiddle.net/carlesso/PKkFf/ show the page content and, then when google.load occurs, the page goes blank?

It works well if the google.load is done immediately, but having it delayed does not work at all.

Here the page source for the lazier (or smarter) of you:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ciao</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  </head>
  <body>
    <h1>Test</h1>
    <div id="quicivanno">
      <p>ciao</p>
    </div>
  </body>
  <script type="text/javascript">
       setTimeout(function() {google.load('visualization', '1.0', {'packages':['corechart']});}, 2000);
  </script>
</html>​
Solution

  • Looks like google.load is adding the script to the page using a document.write(), which if used after the page loads, wipes out the html.

    This explains more in-depth: http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6

    Using one of the ideas, you could use a callback for the load to force it use append rather than doc.write:

    setTimeout(function(){google.load('visualization', '1', {'callback':'alert("2 sec wait")', 'packages':['corechart']})}, 2000);

    This demonstrates the 2 second wait with the delayed alert window