Вызов 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 (последний браузер, который мне нужен, - требования к проекту - пожалуйста, никаких пламенных войн).

Любые мысли о том, почему Safari игнорирует JavaScript в файле trackingCode.html?

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

Ответ 1

Вы загружаете всю HTML-страницу в свой div, включая теги html, head и body. Что произойдет, если вы выполните загрузку и просто запустите script, закрыв script и код 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.

Обновление: добавлено пространство имен DOCTYPE и html, чтобы он соответствовал коду в моей тестовой среде. Протестировано с помощью Firefox 3.6.13 и работает пример кода.

Ответ 2

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

Ответ 3

Еще одна версия John Pick solution, это отлично работает для меня:

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); } );
   }
   ...
});

Ответ 4

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

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.');
});

Ответ 5

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

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

Я смотрю на Firebug DOM и вообще нет script node, только HTML и мой CSS node.

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

Ответ 6

Протестируйте это с помощью trackingCode.html:

<script type="text/javascript">

    $(function() {

       show_alert();

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

    });
 </script>

Ответ 7

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

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

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

Спасибо, Mohan

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

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