Question

我正试图找到一种动态加载Google可视化API表的方法，从动态查询填充到Google电子表格到Blogger博客帖子。

不幸的是，博客样式表似乎废弃了表的样式，所以我想我会尝试将动态加载的表注入iframe并将其与主页隔离：

<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>

这似乎在一个简单的HTML文本页面中没有问题，除了：

1）在测试页面中，“）;}，1）;}）;}也在页面上呈现（所以显然不对......）

2）Blogger HTML编辑器/ parses抛出一个解析错误并阻止页面的保存（可能与1中的问题相同）

任何想法如何解决这个问题？可能有一些我错过的明显的东西吗？： - （

Answer 1

您的报价不匹配 - fldj_sskey = ...的双引号正在关闭传递给$ body.html的字符串。

然后你有“＆lt; / script＆gt;”在脚本标记中的字符串中未编码，因此HTML解析器认为脚本标记在那里结束。你必须小心使用内联js，并且应该对它进行html编码...

Answer 2

这一行是你的问题：

$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 );

您正在使用双引号（“）中包含的字符串调用.html()，但在初始化f1dj_sskey变量时，您的字符串包含双引号。这意味着您的字符串会提前关闭。您需要将字符串中的引号更改为单引号，或者需要转义它们。

单引号（将"更改为'）：

$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 );

转义（将"更改为\"）：

$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 );

使用JQuery动态地将Javascript注入iframe

2 个答案: