2009-05-20 16 views
72

To wydaje się być problemem związanym tylko z przeglądarką Safari. Próbowałem 4 na Macu i 3 na Windowsie i nadal nie mam szczęścia.Wywołanie jQuery .load() nie wykonuje JavaScript w załadowanym pliku HTML

Próbuję załadować zewnętrzny plik HTML i mieć JavaScript, który jest osadzony execute.

Kod Próbuję użyć to:

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

trackingCode.html wygląda następująco (teraz prosty, ale poszerzy raz/jeśli dostanę tej pracy):

<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 "widzę obie wiadomości alarmowe w IE (6 & 7) i Firefox (2 & 3). Jednak nie widzę wiadomości w Safari (ostatnia przeglądarka, którą muszę mieć na uwadze - wymagania dotyczące projektu - proszę nie prowadzić wojen płomieniowych).

Wszelkie uwagi na temat tego, dlaczego Safari ignoruje kod JavaScript w pliku trackingCode.html?

Ostatecznie chciałbym móc przekazać obiekty JavaScript do tego pliku trackingCode.html, które będą używane w ramach wywołania jQuery, ale chciałbym się upewnić, że jest to możliwe we wszystkich przeglądarkach, zanim przejdę na tę drogę.

Odpowiedz

51

Załadujesz całą stronę HTML do div, w tym znaczników html, head i body. Co się stanie, jeśli wykonasz ładowanie i po prostu załadujesz skrypt otwierający, zamykający skrypt i kod JavaScript w załadowanym kodzie HTML?

Oto strona kierowcy:

<!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> 

Oto treść trackingCode.html:

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

To działa na mnie w Safari 4.

Aktualizacja: Dodano DOCTYPE i Przestrzeń nazw html pasująca do kodu w moim środowisku testowym. Testowane w Firefoksie 3.6.13 i działający przykładowy kod.

+1

Rozumiem, dzięki Tony! Usunięcie znaczników , , , – Mike

+1

i błąkałem się, czy powinienem zrobić osobne wywołanie ajax getJson(), ponieważ słyszałem o tym .. Ale jeśli to działa tak, to jest ok !! Nazwałbym te same zapytania dwukrotnie inaczej – GorillaApe

+2

Twój kod nie działa w FF (IE8 - działa poprawnie). Czy istnieje sposób, aby to działało w ** wszystkich ** przeglądarkach? Dzięki –

2

test z tym w trackingCode.html:

<script type="text/javascript"> 

    $(function() { 

     show_alert(); 

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

    }); 
</script> 
12

Zdaję sobie sprawę, jest to nieco starszy post, ale dla każdego, kto przychodzi do tej strony patrząc na podobne rozwiązanie ...

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

jQuery.getScript(url, [ success(data, textStatus) ]) 
  • url - Ciąg zawierający adres URL, do którego wysłano żądanie.

  • success(data, textStatus) - Funkcja wywołania zwrotnego, która jest wykonywana, jeśli żądanie się powiedzie.

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

Cóż miałem ten sam problem, że tylko wydawało się zdarzyć dla Firefoksa, a ja nie mogę użyć innego polecenia JQuery wyjątkiem .load(), ponieważ byłem modyfikowania front-end na exisitng plikach PHP ...

W każdym razie, po użyciu polecenia .load(), osadziłem mój skrypt JQuery w zewnętrznym kodzie HTML, który został załadowany i wydawało się, że działa. Nie rozumiem, dlaczego JS załadowany na górze głównego dokumentu nie działał dla nowej zawartości, jednak ...

+0

Łatwo, bo nowych treści nie było, gdy skrypt został wykonany. – Matteo

7

To nie działa, jeśli ładujesz pole HTML do dynamicznie tworzony element.

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

Patrzę na firebug DOM i nie ma w ogóle węzła skryptu, tylko węzeł HTML i mój CSS.

Ktoś się z tym zetknął?

+0

Tak, ten sam problem. – Dex

+0

Musiałem załadować html, a następnie w wywołanie zwrotnym użyć $ .getScript, aby uzyskać javascript. – Dex

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

naprawdę jest .getScript() dobrym rozwiązaniem w tym problemie;) +1 –

+0

To mi się udało. Oto przykład, który możesz wypróbować: var frmAcademicCalendar = "frmAcademicCalendar.aspx" jeśli (window.location.href.toLowerCase(). IndexOf (frmAcademicCalendar.toLowerCase())> = 0) { $ ("#IncludeCMSContent") .load ("http://www.example.com #externalContent", function() { $ .getScript ("example.js"); }); } – Evan

2

pan prawie dostał. Powiedz jQuery chcesz załadować tylko skryptu:

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

Ale wydaje się to TYLKO załadować i skrypt. Jak zmusić go do załadowania treści HTML i uruchomienia dowolnego javascriptu, który może zawierać? – ThatAintWorking

19

A, innych wersji John Pick's solution tuż przed, to działa dobrze dla mnie:

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

To jest najlepsze rozwiązanie !, Kocham cię @ Youick, zrobiłem mój dzień – utiq

+0

W końcu znalazłem dobry użytek z eval – NaveenDA

0

udało mi się rozwiązać ten problem poprzez zmianę $(document).ready() do window.onLoad() .

Powiązane problemy