Asyncronus Javascript рендеринг виджетов - PullRequest
1 голос
/ 17 июня 2010

Я создаю виджет javascript, чтобы сторонние разработчики (веб-дизайнеры) могли разместить ссылку на своем веб-сайте, и он отобразит виджет на своем сайте.В настоящее время я делаю это только с помощью тега ссылки на скрипт:

<div class="some_random_div_in_html_body">
<script type='text/javascript' src='http://remotehost.com/link/to/widget.js'></script> 
</div>

Однако, это имеет побочный эффект - замедляет время отрисовки веб-сайта сторонней организации, если мой сайт загружен,Поэтому я бы хотел, чтобы сторонний веб-сайт запрашивал ссылку на виджет с моего сайта асинхронно, а затем отображал его на своем сайте, когда ссылка на виджет загружается полностью.Фрагмент javascript в Google Analytics, кажется, содержит хороший асинхронный код, который выполняет хороший асинхронный запрос для моделирования, но мне интересно, могу ли я изменить его так, чтобы он отображал контент на стороннем сайте.

Используя приведенный ниже пример, я хочу, чтобы содержимое http://mysite.com/link/to/widget.js отображало что-то в поле идентификатора сообщения.

<HTML>
<HEAD><TITLE>Third Party Site</TITLE><STYLE>#message { background-color: #eee; } </STYLE></HEAD>
<BODY>
<div id="message">asdf</div>
<script type="text/javascript">
  (function() {
   var ga = document.createElement('script'); 
   ga.type = 'text/javascript'; 
   ga.async = true;
   ga.src = 'http://mysite.com/link/to/widget.js';
   var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(ga, s);
 })();
</script>
</BODY>
</HTML>

Я не знаю, является ли то, что я пытаюсь сделать, межсайтовым скриптингом (все еще немного расплывчато в этой концепции), но мне интересно, возможно ли то, что я пытаюсь сделать.Или, если у кого-то есть другие подходы к эффективному созданию виджетов JavaScript, я буду признателен за любые советы.Спасибо, что прочитали это.Джо

Ответы [ 2 ]

2 голосов
/ 03 марта 2011

Отличная статья, сравнивающая все разные методы: -

http://friendlybit.com/js/lazy-loading-asyncronous-javascript/

1 голос
/ 17 июня 2010

Извините, что crossdomain xhr заблокирован всеми браузерами. Функция google.load () Google Analytics фактически добавляет теги script к элементу head, а не использует xhr. А атрибут async является частью HTML5 и реализован только в Firefox 3.6.

Вы можете использовать прослушиватель событий для динамической загрузки скрипта при загрузке документа и добавления добавления виджета в заранее определенный элемент (т. Е. С идентификатором).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...