La llamada jQuery .load () no ejecuta JavaScript en el archivo HTML cargado

83

Este parece ser un problema relacionado únicamente con Safari. Probé 4 en Mac y 3 en Windows y todavía no tengo suerte.

Estoy intentando cargar un archivo HTML externo y ejecutar el JavaScript que está incrustado.

El código que estoy tratando de usar es este:

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

trackingCode.html se ve así (simple ahora, pero se expandirá una vez / si consigo que esto funcione):

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

Veo mensajes de alerta en IE (6 y 7) y Firefox (2 y 3). Sin embargo, no puedo ver los mensajes en Safari (el último navegador con el que debo preocuparme: requisitos del proyecto, por favor, no guerras de llamas).

¿Alguna idea sobre por qué Safari ignora el JavaScript en el trackingCode.htmlarchivo?

Eventualmente, me gustaría poder pasar objetos JavaScript a este trackingCode.htmlarchivo para usarlos dentro de la llamada jQuery ready, pero me gustaría asegurarme de que esto sea posible en todos los navegadores antes de seguir ese camino.

jquery ajax safari Miguel
fuente

Respuestas:

56

Está cargando una página HTML completa en su div, incluidas las etiquetas html, head y body. ¿Qué sucede si realiza la carga y solo tiene el script de apertura, el script de cierre y el código JavaScript en el HTML que carga?

Aquí está la página del controlador:

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

Aquí está el contenido de trackingCode.html:

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

Esto me funciona en Safari 4.

Actualización: se agregaron DOCTYPE y espacio de nombres html para que coincida con el código en mi entorno de prueba. Probado con Firefox 3.6.13 y el código de ejemplo funciona.

Tony Miller
fuente
1
¡Entendido, gracias Tony! La eliminación de las etiquetas <html>, <head> y <body> pareció funcionar.
Mike
1
Estaba divagando si debería hacer una llamada ajax separada getJson () porque me enteré de esto ... ¡Pero si funciona así, está bien! De lo contrario, llamaría a las mismas consultas dos veces
GorillaApe
2
Su código no funciona realmente en FF (IE8 - funciona bien). ¿Hay alguna forma de hacer que esto funcione en todos los navegadores? Gracias
1
@Maxim Galushka Todavía tenía estos archivos en mi estación de trabajo personal. Sin modificaciones, produjeron el comportamiento correcto. Estoy usando Firefox 3.6.13 en Windows 7.
Tony Miller
41 
$("#images").load(location.href+" #images",function(){
    $.getScript("js/productHelper.js"); 
});
xtds
fuente
Esto funcionó para mí. Aquí hay un ejemplo que puede probar: var frmAcademicCalendar = "frmAcademicCalendar.aspx" if (window.location.href.toLowerCase (). IndexOf (frmAcademicCalendar.toLowerCase ())> = 0) {$ ("# IncludeCMSContent"). load (" example.com #externalContent", function () {$ .getScript ("example.js");}); }
Evan
25

Una otra versión de la solución de John Pick justo antes, esto funciona bien para mí:

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); } );
   }
   ...
});
Yannick
fuente
2
¡Esta es la mejor solución !, te amo @Yannick, me alegraste el día
utiq
15

Me doy cuenta de que esta es una publicación algo más antigua, pero para cualquiera que venga a esta página en busca de una solución similar ...

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

jQuery.getScript( url, [ success(data, textStatus) ] )

  • url : Una cadena que contiene la URL a la que se envía la solicitud.

  • success(data, textStatus) - Una función de devolución de llamada que se ejecuta si la solicitud tiene éxito.

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

Esto no parece funcionar si está cargando el campo HTML en un elemento creado dinámicamente.

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

Miro el DOM de firebug y no hay ningún nodo de script, solo el HTML y mi nodo CSS.

¿Alguien se ha encontrado con esto?

tim
fuente
Tuve que cargar el html, luego en la devolución de llamada, usar $ .getScript para obtener el javascript.
Dex
1
¡Tipo! Resolvió mi problema unos 8 años antes. Gracias: D
Skorek
3

Casi lo tienes. Dile a jquery que quieres cargar solo el script:

$("#myBtn").click(function() {
    $("#myDiv").load("trackingCode.html script");
});
John Pick
fuente
7
Pero esto parece que SOLO se carga y el script. ¿Cómo se consigue que cargue el contenido html Y ejecute cualquier JavaScript que pueda contener?
ThatAintWorking
2

Pruebe con esto en trackingCode.html:

<script type="text/javascript">

    $(function() {

       show_alert();

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

    });
 </script>
Aamir
fuente
1

Me encontré con esto donde los scripts se cargarían una vez, pero las llamadas repetidas no ejecutarían el script.

Resultó ser un problema al usar .html () para mostrar un indicador de espera y luego encadenar .load () después.

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

Cuando les hice llamadas por separado, mis scripts en línea se cargaron cada vez como se esperaba.

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

Para más investigación, tenga en cuenta que hay dos versiones de .load ()

Una simple llamada .load () (sin un selector después de la url) es simplemente una forma abreviada de llamar a $ .ajax () con dataType: "html" y tomar el contenido devuelto y llamar a .html () para poner esos contenidos en el DOM . Y la documentación para dataType: "html" establece claramente que "las etiquetas de script incluidas se evalúan cuando se insertan en el DOM". http://api.jquery.com/jquery.ajax/ Entonces .load () ejecuta oficialmente scripts en línea.

Una llamada .load () compleja tiene un selector como load ("page.html #content"). Cuando se usa de esa manera, jQuery filtra a propósito las etiquetas de script como se explica en artículos como este: https://forum.jquery.com/topic/the-load-function-and-script-blocks#14737000000752785 En este caso, los scripts nunca correr, ni siquiera una vez.

efreed
fuente
0

Bueno, tuve el mismo problema que solo parecía suceder con Firefox, y no pude usar otro comando de JQuery excepto .load () ya que estaba modificando el front-end en archivos PHP existentes ...

De todos modos, después de usar el comando .load (), incrusté mi script JQuery dentro del HTML externo que se estaba cargando y pareció funcionar. Sin embargo, no entiendo por qué el JS que cargué en la parte superior del documento principal no funcionó para el nuevo contenido ...

Víctor G. Reano
fuente
Fácil, porque el nuevo contenido no estaba allí cuando se ejecutó el script.
Matteo
0

Pude solucionar este problema cambiando $(document).ready()a window.onLoad().

Casey Dwayne
fuente
0

Yendo a la respuesta de @efreed ...

Estaba usando .load('mypage.html #theSelectorIwanted') para llamar al contenido de una página por selector, pero eso significa que no ejecuta los scripts en línea dentro.

En cambio, pude cambiar mi marcado para que se '#theSelectorIwanted'convirtiera en su propio archivo y usé

load('theSelectorIwanted.html`, function() {});

y ejecutó bien los scripts en línea.

No todos tienen esa opción, ¡pero esta fue una solución rápida para llegar a donde quería!

RCNeil
fuente