Будут ли загружаться теги скрипта при загрузке html-страницы через ajax? - PullRequest
Новая
       3

Будут ли загружаться теги скрипта при загрузке html-страницы через ajax?

29 голосов
/ 05 февраля 2010

Когда вы загружаете HTML-документ, используя AJAX, что он делает с узлами внутри тега HEAD: (скрипт, ссылка, стиль, мета, заголовок) игнорирует их или загружает и анализирует их? А в случае функции jjery ajax ()?

Ответы [ 5 ]

39 голосов
/ 05 февраля 2010

Когда вы вызываете метод jQuery.ajax(), вы можете указать свойство dataType, которое описывает, какой тип данных вы ожидаете от сервера, и как обрабатывать их после получения.

По умолчанию jQuery будет пытаться угадать dataType на основе MIME-типа ответа. Однако вы можете явно указать dataType из следующего:

  • html : возвращает HTML в виде обычного текста; включенные теги сценария оцениваются при вставке в DOM.

  • текст : строка простого текста.

  • xml : возвращает документ XML, который можно обработать с помощью jQuery.

  • script : Оценивает ответ как JavaScript и возвращает его в виде простого текста. Отключает кеширование, если не используется опция «кеш».

  • json : Оценивает ответ как JSON и возвращает объект JavaScript.

  • jsonp : загрузка в блок JSON с использованием JSONP. Добавит дополнительный "? Callback =?" в конце вашего URL укажите обратный вызов.

В качестве примера следующий вызов ajax вернет данные в виде простой текстовой строки без выполнения сценариев или манипулирования DOM: 

$.ajax({
  url: 'ajax/test.html',
  dataType: 'text',
  success: function(data) {
    alert(data);
  }
});
31 голосов
/ 05 февраля 2010

при загрузке HTML-документа с использованием AJAX, что он делает с узлами внутри тега HEAD: (скрипт, ссылка, стиль, мета, заголовок)

Это зависит от того, как вы делаете загрузку. ajax() (как и в случае XMLHttpRequest, на котором оно основано) просто дает вам строку. Как вы получаете это в документе?

Если вы запишите эту строку в innerHTML элемента, сценарии внутри него не будут выполняться. Это нигде не стандартизировано, но все популярные в настоящее время браузеры ведут себя таким образом.

Однако, если вы затем вставите этот элемент в документ (независимо от того, был ли он уже внутри документа ранее или нет), будет выполняться во многих браузерах при первом запуске. В IE сценарий будет выполняться, когда вы непосредственно вставляете элемент сценария в любой элемент , будь то документ или нет.

Это все очень противоречиво и неудобно, поэтому вам следует избегать AJAX-загрузки <script> элементов в документе. В любом случае, обычно нет веской причины; лучше сохранить статический код сценария и использовать JSON (или eval только в случае крайней необходимости) для передачи им данных сценария.

Функция jQuery load пытается компенсировать различия в браузере при AJAX-загрузке содержимого в документ. Он не может охватить все обстоятельства, связанные с <script> (есть некоторые действительно странные). Вы не должны полагаться на это, в общем. Вы можете избежать ответа на HTML-страницу, но затем загрузить только определенные элементы без <script>, потому что это только делает шаг write-to-innerHTML. Но опять же, вы действительно не хотите полагаться на это. Намного лучше, чтобы сервер возвращал фрагмент HTML или JSON, который ваши скрипты могут использовать напрямую.

Что касается таблиц стилей и ссылок на таблицы стилей, то их вставка в тело обычно работает, хотя, с точки зрения HTML, это, вероятно, не должно. meta и title ничего не сделают, для них уже слишком поздно оказывать влияние. Просто анализ их с помощью innerHTML ничего не сделает, но, тем не менее, избегайте этого, если можете.

8 голосов
/ 05 февраля 2010

Когда вы говорите «загрузить», я понимаю, что это просто означает вызов XHR (или $ .ajax или $ .get и т. Д.) Для извлечения XML, JSON или текстового ресурса с веб-сервера, сохраните его в JS браузера запусти оперативную память и получи ссылку на нее. Для HTML-ресурсов это действие само по себе ничего не анализирует.

Однако, если вы возьмете этот HTML-код и вставите его в DOM (по крайней мере, в Firefox 3.5), то будет интерпретировано. Например, допустим, у вас есть три следующих очень профессиональных файла.

barf1.html: 

<html>
    <head>
        <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(init);

            function init() {
                $.get('barf2.html', inject);
            }

            function inject(data) {
                debugger;
                $('body').html(data);
                //document.write(data);
            }
        </script>
    </head>
    <body>
        long live barf1!
    </body>
</html>

barf2.html: 

<div>
    <script type="text/javascript">
        alert('barf2!');
    </script>
    <script type="text/javascript" src="barf3.js"></script>
    barf2 lives here now!
</div>

barf3.js: 

alert('barf3!');

При переходе к barf1.html содержимое страницы изменится, и вы увидите два предупреждения JavaScript, указывающих, что интерпретируются как встроенные блоки скриптов, так и внешние файлы скриптов.

2 голосов
/ 05 февраля 2010

Нет, они не будут интерпретироваться.

HTML может быть загружен либо с помощью innerHTML, либо с помощью DOM-манипуляций. В обоих случаях, если HTML содержит теги <script>, они не будут интерпретироваться.

Однако вы можете просмотреть теги <script> внутри содержимого Ajaxed HTML и eval(), если вам это действительно нужно.

Однако, если вы используете этот тип тега сценария <script src="http://site/script.js"></script>, он будет интерпретирован.

1 голос
/ 05 февраля 2010

Как уже было отмечено, в общем - нет, теги сценария не будут интерпретироваться.

Я не совсем уверен, что произойдет с другими тегами.

Я предполагаю, что вы загружаете целую страницу в AJAX - я не уверен, почему вы захотите это сделать? Может быть, вы могли бы дать нам немного больше информации, и мы могли бы сделать некоторые предложения?

Чтобы ответить на ваш вопрос более прямо - в общем, любые скрипты, необходимые для перезагруженного контента, должны загружаться не с контентом, а со страницей. Таким образом, вы можете организовать обратный вызов от ваших обработчиков событий AJAX и т. Д.

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

Нет похожих вопросов

...