使用 JQuery 将 Javascript 动态注入 iframe

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 编辑器/解析器抛出解析错误并阻止保存页面（可能与 1 中的问题相同）

有什么想法可以解决这个问题吗？:-(

Answer 1

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

然后你就得到了“”脚本标签内的字符串未编码，因此 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 );