При загрузке html-страницы через ajax будут загружены теги script?

Когда вы загружаете html-документ с помощью AJAX, что он делает с узлами внутри тега HEAD: (script, link, style, meta, title) игнорируют их или загружают и анализируют? А в случае функции jquery ajax()?

ОТВЕТЫ

Ответ 1

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

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

  • html: возвращает HTML как обычный текст; теги script оцениваются при вставке в 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);
  }
});

Ответ 2

когда вы загружаете html-документ с помощью AJAX, что он делает с узлами внутри тега HEAD: (script, link, style, meta, title)

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

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

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

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

Функция

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

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

Ответ 3

Когда вы говорите "load", я понимаю, что просто означать вызов 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, указывающие, что интерпретируются как встроенные script, так и внешние script файлы.

Ответ 4

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

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

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

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

Ответ 5

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

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

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

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