#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. Это научит меня строить догадки.