Динамическое внедрение Javascript в iframe с помощью JQuery - PullRequest
Новая
       1

Динамическое внедрение Javascript в iframe с помощью JQuery

2 голосов
/ 23 мая 2011

Я пытаюсь найти способ динамической загрузки таблицы API визуализации Google, заполняемой из динамического запроса в электронную таблицу 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) HTML-редактор / анализатор Blogger выдает ошибку синтаксического анализа и блокирует сохранение страницы (возможно, та же проблема, что и в 1)

Есть идеи, как это исправить? Может быть, что-то очевидное я пропустил ?:- (

Ответы [ 2 ]

2 голосов
/ 23 мая 2011

Эта строка является вашей проблемой: 

$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 );
2 голосов
/ 23 мая 2011

Ваши кавычки не совпадают - двойные кавычки для fldj_sskey = ... закрывают строку, передаваемую в $ body.html.

И тогда у вас есть "" незакодированныйв строках внутри вашего тега script, поэтому анализатор HTML считает, что тег script заканчивается на этом.Вы должны быть осторожны с встроенными js и должны действительно кодировать все HTML ...

...