CODEWITHSUNDEEP
javascriptjqueryblogger
psychemedia
psychemedia

Reputation: 5940

Dynamically injecting Javascript into an iframe with JQuery

I'm trying to find a way of dynamically loading a Google visualisation API table, populated from a dynamic query onto a Google spreadsheet into a Blogger blogpost.

Unfortunately, the blog style sheet seems to trash the style of the table, so I thought I'd try to inject the dynamically loaded table into an iframe and isolate it from the host page:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(f1dj_iframeloader);
function f1dj_iframeloader(){
  $(function() {var $frame = $('iframe');
  setTimeout( function() {
    var doc = $frame[0].contentWindow.document;
    var $body = $('body',doc);
    $body.html("<script type='text/javascript' src='http://www.google.com/jsapi'></script><script type='text/javascript'>var f1dj_sskey="tQQIIA7x9VuyVKE7UVdrytg";var f1dj_sheet=8;var f1dj_authkey='CITwr80K';google.load('visualization', '1', {'packages':['table']});function f1dj_getData(){var url='http://spreadsheets.google.com/tq?tq=select%20*&key='+f1dj_sskey+'&authkey='+f1dj_authkey+'&gid='+f1dj_sheet;var query = new google.visualization.Query(url); query.send(f1dj_displayTable);} function f1dj_displayTable(response){if (response.isError()) return;var data = response.getDataTable(); visualization = new google.visualization.Table(document.getElementById('f1dj__table'));visualization.draw(data, null);} google.setOnLoadCallback(f1dj_getData)</script><div id='f1dj__table'></div>");}, 1 );
  });
}</script>

This seems to work okay in a simple HTML text page EXCEPT that:

1) in the test page, ");}, 1 );});} is also rendered on the page (so something's obviously not right...)

2) the Blogger HTML editor/parses throws a parse error and blocks the saving of the page (maybe same issue as in 1)

Any ideas how to fix this? Is there maybe something obvious I've missed?:-(

Upvotes: 2

Views: 2846

Answers (2)

Tim
Tim

Reputation: 1006

Your quotes don't match up - the double quotes for fldj_sskey=... are closing the string being passed to $body.html.

And then you've got "</script>" unencoded in the strings within your script tag, so the HTML parser thinks the script tag ends there. You have to be careful with inline js and should really html encode it all...

Upvotes: 2

Alan Geleynse
Alan Geleynse

Reputation: 25139

This line is your problem:

$body.html("<script type='text/javascript' src='http://www.google.com/jsapi'></script><script type='text/javascript'>var f1dj_sskey="tQQIIA7x9VuyVKE7UVdrytg";var f1dj_sheet=8;var f1dj_authkey='CITwr80K';google.load('visualization', '1', {'packages':['table']});function f1dj_getData(){var url='http://spreadsheets.google.com/tq?tq=select%20*&key='+f1dj_sskey+'&authkey='+f1dj_authkey+'&gid='+f1dj_sheet;var query = new google.visualization.Query(url); query.send(f1dj_displayTable);} function f1dj_displayTable(response){if (response.isError()) return;var data = response.getDataTable(); visualization = new google.visualization.Table(document.getElementById('f1dj__table'));visualization.draw(data, null);} google.setOnLoadCallback(f1dj_getData)</script><div id='f1dj__table'></div>");}, 1 );

You are calling .html() with a string contained in double quotes (") but your string contains double quotes when you initialize the f1dj_sskey variable. This means that your string is getting closed early. You need to change the quotes in the string either to single quotes or you need to escape them.

Single quotes (change " to '):

$body.html("<script type='text/javascript' src='http://www.google.com/jsapi'></script><script type='text/javascript'>var f1dj_sskey='tQQIIA7x9VuyVKE7UVdrytg';var f1dj_sheet=8;var f1dj_authkey='CITwr80K';google.load('visualization', '1', {'packages':['table']});function f1dj_getData(){var url='http://spreadsheets.google.com/tq?tq=select%20*&key='+f1dj_sskey+'&authkey='+f1dj_authkey+'&gid='+f1dj_sheet;var query = new google.visualization.Query(url); query.send(f1dj_displayTable);} function f1dj_displayTable(response){if (response.isError()) return;var data = response.getDataTable(); visualization = new google.visualization.Table(document.getElementById('f1dj__table'));visualization.draw(data, null);} google.setOnLoadCallback(f1dj_getData)</script><div id='f1dj__table'></div>");}, 1 );

Escaping (change " to \"):

$body.html("<script type='text/javascript' src='http://www.google.com/jsapi'></script><script type='text/javascript'>var f1dj_sskey=\"tQQIIA7x9VuyVKE7UVdrytg\";var f1dj_sheet=8;var f1dj_authkey='CITwr80K';google.load('visualization', '1', {'packages':['table']});function f1dj_getData(){var url='http://spreadsheets.google.com/tq?tq=select%20*&key='+f1dj_sskey+'&authkey='+f1dj_authkey+'&gid='+f1dj_sheet;var query = new google.visualization.Query(url); query.send(f1dj_displayTable);} function f1dj_displayTable(response){if (response.isError()) return;var data = response.getDataTable(); visualization = new google.visualization.Table(document.getElementById('f1dj__table'));visualization.draw(data, null);} google.setOnLoadCallback(f1dj_getData)</script><div id='f1dj__table'></div>");}, 1 );

Upvotes: 2

Related Questions