Как получить содержимое «скрипта», отличного от javascript?

#javascript #jquery #jquery-templates

#javascript #jquery #jquery-шаблоны

Вопрос:

Я включаю <script> тег на свою HTML-страницу, которая содержит фрагмент HTML. Я хочу получить этот фрагмент и вставить его на страницу. Фрагмент находится на том же сервере, что и сама страница, поэтому проблем с межсайтовыми связями не возникает.

 <script id="frag" src="/frag.html" type="text/x-jquery-tmpl"></script>
  

(Кстати, я указал тип скрипта как text /x-jquery-tmpl, поскольку я пытался использовать шаблоны jQuery для доступа к содержимому скрипта, хотя это всего лишь HTML-литерал). Я считаю, что значение «type» не имеет большого значения.

Некоторые вещи, которые я пробовал:

 // Try inserting frag.html into div hdr
// this attempt, using jQuery templates, doesn't work
$('#frag').tmpl().appendTo('#hdr');

// This is an empty string
var contents = $('#frag').text();
  

Извините за весь этот jQuery, я еще меньше представляю, как попытаться сделать это без него. Я не разбираюсь в javascript и постоянно нуждаюсь в надежной защите jQuery.

Комментарии:

1. Просто из любопытства, почему вы вставляете html в тег script вместо, например, параметра display none div?

2. Мне просто интересно, зачем вы это сделали? Не проще ли было бы просто поместить его в html-файл и извлечь этот файл или элемент на странице? Любопытно, зачем вы это делаете, вот и все…

3. @Andre — это в другом файле, поэтому не встроено в страницу.

4. @mcos — Хороший вопрос! Я пытаюсь исключить разметку, которая является общей для многих html-страниц, в системе, где любые динамические аспекты html-страниц должны генерироваться на клиенте (никаких шаблонов на стороне сервера). Если бы у меня был серверный скрипт, я мог бы генерировать html-части прямо на страницах. Это, наверное, ясно как божий день 🙂

5. Хм, хорошо… Значит, вам нужно, чтобы оно загружалось вместе со страницей? Вот почему вы не используете, например, $.get(‘another_page.html ‘)?

Ответ №1:

Вы должны использовать «.html()»:

 var contents = $('#frag').html();
  

Лично я думаю, что это глупо, и что «.text()» должен работать, но я зарегистрировал ошибку по этой проблеме, и сотрудники jQuery отказались ее исправлять.

Кроме того, значение атрибута «type» на самом деле не имеет большого значения, но вам определенно нужно установить для него что-то, а не (конечно) фактический тип JavaScript.

Комментарии:

1. Не будут ли работать собственные innerText или textContent свойства?

2. @Tomalak «innerText» по какой-то причине не работает в IE с <script> тегами.

3. Мне кажется, что html() работает только тогда, когда тег script является встроенным, а не указывает на содержимое с помощью атрибута src.

4. Ах… Хорошо, тогда это совсем другое дело. В этом случае я бы просто извлек код с помощью «$.get()» или чего-то в этом роде.

Ответ №2:

или более полно:

 $(document).ready(function(){

  $('#hdr').append($('#frag').html());

});
  

или вообще без тега script…

     <div id='hdr'>
      //content
      <div id='hdr_add'></div>
    </div>
...

     $(document).ready(function(){
        $('#hdr_add').load('frag.html');
    });
  

.load() — это короткий вызов AJAX, который легко и просто загружает содержимое с заданного URL в данный элемент.

Комментарии:

1. Может быть .load — простое решение. Я надеялся, что включение его в тег каким-то образом обеспечит его загрузку «раньше», чтобы, возможно, сократить внешний вид страницы, которая «создается». Но это чистое предположение с моей стороны.

2. Хм, хорошо. Я попробовал это, и я не вижу никакого визуального эффекта от вставки фрагмента с использованием load. Это научит меня строить догадки.