на jQuery.вызов load () не выполняет JavaScript в загруженном HTML-файле

это, кажется, проблема, связанная только с Safari. Я пробовал 4 на Mac и 3 на Windows, и мне все еще не повезло.

Я пытаюсь загрузить внешний HTML-файл и выполнить встроенный JavaScript.

код, который я пытаюсь использовать это:

$("#myBtn").click(function() {
    $("#myDiv").load("trackingCode.html");
});

trackingCode.html выглядит так (просто сейчас, но будет расширяться один раз/если я получу эту работу):

<html>
<head>
    <title>Tracking HTML File</title>
    <script language="javascript" type="text/javascript">
        alert("outside the jQuery ready");
        $(function() {
            alert("inside the jQuery ready");
        });
    </script>
</head>

<body>
</body>
</html>

Я вижу как сообщения в IE (6 & 7) и Firefox (2 & 3). Тем не менее, я не могу видеть сообщения в Safari (последний браузер, с которым мне нужно иметь дело - требования к проекту - пожалуйста, не flame wars).

любые мысли о том, почему Safari игнорирует JavaScript в ?

в конце концов, я хотел бы иметь возможность передавать объекты JavaScript этому trackingCode.html файл, который будет использоваться в вызове jQuery ready, но я хотел бы убедиться, что это возможно во всех браузерах, прежде чем я пойду по этому пути.

11 ответов


вы загружаете всю HTML-страницу в div, включая теги html, head и body. Что произойдет, если вы выполните загрузку и просто получите сценарий открытия, сценарий закрытия и код JavaScript в HTML, который вы загружаете?

вот страница драйвера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery Load of Script</title>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("jquery", "1.3.2");
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#myButton").click(function() {
                    $("#myDiv").load("trackingCode.html");
                });
             });
         </script>
    </head>
    <body>
        <button id="myButton">Click Me</button>
        <div id="myDiv"></div>
    </body>
</html>

вот содержимое trackingCode.HTML-код:

<script type="text/javascript">
    alert("Outside the jQuery ready");
    $(function() {
        alert("Inside the jQuery ready");
    });
 </script>

это работает для меня в Safari 4.

Update: добавлено пространство имен DOCTYPE и html в соответствии с кодом моего теста окружающая среда. Протестировано с Firefox 3.6.13 и пример кода работает.


$("#images").load(location.href+" #images",function(){
    $.getScript("js/productHelper.js"); 
});

другая версия решение Джона пика как раз перед этим, это отлично работает для меня:

jQuery.ajax({
   ....
   success: function(data, textStatus, jqXHR) {
       jQuery(selecteur).html(jqXHR.responseText);
       var reponse = jQuery(jqXHR.responseText);
       var reponseScript = reponse.filter("script");
       jQuery.each(reponseScript, function(idx, val) { eval(val.text); } );
   }
   ...
});

Я понимаю, что это несколько более старый пост, но для тех, кто приходит на эту страницу в поисках аналогичного решения...

http://api.jquery.com/jQuery.getScript/

jQuery.getScript( url, [ success(data, textStatus) ] )
  • url - строка, содержащая URL-адрес, на который отправляется запрос.

  • success(data, textStatus) - функция обратного вызова, который выполняется, если запрос выполняется успешно.

$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

это, похоже, не работает, если вы загружаете поле HTML в динамически созданный элемент.

$('body').append('<div id="loader"></div>');
$('#loader').load('htmlwithscript.htm');

Я смотрю на firebug DOM, и нет никакого узла скрипта вообще, только HTML и мой узел CSS.

кто-нибудь сталкивался с этим?


вы почти поняли. Скажите jquery, что вы хотите загрузить только скрипт:

$("#myBtn").click(function() {
    $("#myDiv").load("trackingCode.html script");
});

тест с этим в trackingCode.HTML-код:

<script type="text/javascript">

    $(function() {

       show_alert();

       function show_alert() {
           alert("Inside the jQuery ready");
       }

    });
 </script>

Я попытался сделать один плагин jquery для функции загрузки html. Пожалуйста, обратитесь по следующей ссылке.

http://webtech-training.blogspot.in/2010/10/dyamic-html-loader.html

пожалуйста, предложите мне его еще улучшить.

спасибо, Мохан!--1-->


Ну, у меня была та же проблема, что и для Firefox, и я не мог использовать другую команду JQuery, кроме как .load () так как я изменял интерфейс на exisitng PHP-файлах...

в любом случае, после использования .команда load (), я встроил свой скрипт JQuery во внешний HTML, который загружался, и он, казалось, работал. Я не понимаю, почему JS, который я загрузил в верхней части основного документа, не работал для нового контента...


я смог исправить эту проблему, изменив $(document).ready() до window.onLoad().


я столкнулся с этим, когда скрипты будут загружаться один раз, но повторные вызовы не будут запускать скрипт.

это оказалось проблемой с использованием .html () для отображения индикатора ожидания, а затем цепочки.нагрузки() после него.

// Processes scripts as expected once per page load, but not for repeat calls
$("#id").html("<img src=wait.gif>").load("page.html");

когда я сделал их отдельные вызовы, мои встроенные скрипты загружались каждый раз, как ожидалось.

// Without chaining html and load together, scripts are processed as expected every time
$("#id").html("<img src=wait.gif>");
$("#id").load("page.html");

для дальнейшего исследования обратите внимание, что существует две версии .load ()

простой .load () вызов (без селектора после url) - это просто стенография для вызова $.ajax () с типом данных:"html" и принимая содержимое возврата и вызывая .html (), чтобы поместить это содержимое в DOM. И документация для типа данных: "html" четко заявляет, что " включенные теги скриптов оцениваются при вставке в DOM."http://api.jquery.com/jquery.ajax/ Итак .load () официально запускает встроенные скрипты.

сложный .вызов load () имеет селектор, такой как load ("страница.содержимое HTML.)" При использовании таким образом, jQuery целенаправленно отфильтровывает теги скриптов, как описано в таких статьях: https://forum.jquery.com/topic/the-load-function-and-script-blocks#14737000000752785 в этом случае скрипты никогда не запускаются, даже один раз.