2009-05-20 2 views
72

Это похоже на проблему, связанную только с Safari. Я пробовал 4 на Mac и 3 на Windows, и мне все еще не повезло.jQuery .load() вызов не выполняется JavaScript в загруженном HTML-файле

Я пытаюсь загрузить внешний 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> 

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

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

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

ответ

51

Вы загружаете всю 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.

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

+1

Получил, спасибо Тони! Снятие трюков , и . – Mike

+1

Я блуждал, должен ли я делать отдельный вызов ajax getJson(), потому что я слышал об этом .. Но если это работает, то это нормально !! Я бы назвал те же запросы дважды, иначе – GorillaApe

+2

Ваш код фактически не работает в FF (IE8 - работает нормально). Есть ли способ сделать эту работу в ** все ** браузерами? Thanks – 2011-01-21 00:46:47

2

Тест с этим в trackingCode.html:

<script type="text/javascript"> 

    $(function() { 

     show_alert(); 

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

    }); 
</script> 
12

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

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

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

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

+0

Легко, потому что нового содержимого не было, когда скрипт был выполнен. – Matteo

7

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

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

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

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

+0

Yup, такой же проблема. – Dex

+0

Мне пришлось загрузить html, а затем в обратном вызове использовать $ .getScript для получения javascript. – Dex

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

действительно $ .getScript() хорошее решение в этой проблеме;) +1 –

+0

Это сделало трюк для меня. Вот пример, который вы можете попробовать: var frmAcademicCalendar = "frmAcademicCalendar.aspx" if (window.location.href.toLowerCase(). IndexOf (frmAcademicCalendar.toLowerCase())> = 0) { $ ("#IncludeCMSContent") .load ("http://www.example.com #externalContent", function() { $ .getScript ("example.js"); }); } – Evan

2

Вы почти получили. Скажите JQuery вы хотите загрузить только скрипт:

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

Но это похоже на ТОЛЬКО загрузку и скрипт. Как вы можете загрузить содержимое html и запустить любой javascript, который он может содержать? – ThatAintWorking

19

другая версия John Pick's 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); }); 
    } 
    ... 
}); 
+1

Это лучшее решение!, Я люблю тебя @ Янник, ты сделал мой день – utiq

+0

Наконец-то я нашел хорошее использование eval – NaveenDA

0

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

Смежные вопросы