Intentando seleccionar etiquetas de script de jQuery ajax get response

Estoy en la página A. Se hace clic en un enlace, y lo estoy cargando en el DOM a través de jQuery get desde la página B. Inside DOM DOM de B son múltiples generados dinámicamente secuencias de comandos con la clase "dataScript" junto con muchas otras etiquetas de script con las que no quiero tener nada que ver.Intentando seleccionar etiquetas de script de jQuery ajax get response

Lo único que quiero de ese DOM son las etiquetas .dataScript, que luego quiero insertar en un div con una ID de "scriptOutput" en el DOM de la página A. Esto no funcionará si el elemento con la clase de "dataScript" es una etiqueta de script. Solo si es alguna otra etiqueta, como una etiqueta "div". He aquí un ejemplo de lo que estoy tratando de hacer:

Página A:

<html> 
<head> 
<title>Page A</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(function() { 
$("#ajaxJsLink").click(function() { 
    $.get("pageB.html", function(data) { 
    var scriptElements = $(data).find(".dataScript").contents(); 
    console.log(scriptElements); 
    $(scriptElements).each(function(index) { 
    $("#scriptOutput").append($(this).html()); 
    }); 
    }); 
    return false; 
}); 
$("#ajaxDivsLink").click(function() { 
    $.get("pageB.html", function(data) { 
    var scriptElements = $(data).find(".dataDiv").contents(); 
    console.log(scriptElements); 
    $(scriptElements).each(function(index) { 
    $("#divOutput").append($(this).html()); 
    }); 
    }); 
    return false; 
}); 
}); 
</script> 
</head> 
<body> 
<p>This is page A.</p> 
<hr /> 
<p> 
<a href="pageB.html" id="ajaxJsLink">Get JavaScript from Page B.</a><br /> 
<a href="pageB.html" id="ajaxDivsLink">Get Divs from Page B.</a> 
</p> 
<hr /> 
<div id="scriptOutput"> 
<h2>Script Output</h2> 
</div> 
<div id="divOutput"> 
<h2>Div Output</h2> 
</div> 
</body> 
</html>

Página B:

<html> 
<head> 
<title>Page B</title> 
</head> 
<body> 
<p>This is page B.</p> 
<div id="scripts"> 
<script type="text/javascript" class="dataScript"> 
    function someFunction() { 
    alert("I am"); 
    } 
</script> 
<script type="text/javascript" class="dataScript"> 
    function anotherFunction() { 
    alert("Javascript"); 
    } 
</script> 
</div> 
<div id="divs"> 
<div class="dataDiv"> 
    <div> 
    function someFunction() { 
    alert("I am"); 
    } 
    </div> 
</div> 
<div class="dataDiv"> 
    <div> 
    function anotherFunction() { 
    alert("Html"); 
    } 
    </div> 
</div> 
</div> 
</body> 
</html>

He intentado anexar .Contenido(), html() y .text() para el contenido de .dataScript, pero nada parece funcionar. Gracias por su consideración al mirar/responder mis preguntas. ¡Aprecio tu ayuda!

ACTUALIZACIÓN:

En el caso de cualquier otra persona está tratando de hacer esto, aquí es el menos-que-elegante, pero una solución totalmente funcional que terminó con:

salida javascript como texto regular (sin etiquetas de script) dentro de un div (con un ID y configurado para mostrar: ninguno) en la página B. Luego en la página A, haga lo siguiente dentro de la función de devolución de llamada de la solicitud get:

var docHead = document.getElementsByTagName("head")[0]; //head of Page A 
var newScript = document.createElement("script"); 
newScript.setAttribute("type","text/javascript"); 
newScript.innerHTML = jQuery(data).find("#divWithPlainTextJs").text(); //insert plain text JS into script element 
docHead.appendChild(newScript); //append script element to head of Page A 
jQuery("#divWithPlainTextJs").remove(); //remove the plain text div and JS from the DOM

Gracias a Emmett por recordarme el método document.createElement.

Fuente

2010-12-13 esvendsen

Esto podría deberse a que 'clase' no es un atributo válido en'

Si carga el resultado AJAX como esta:

function (data) { 
// the result is loaded in the variable 'data' 
}

hasta que quede en un div así:

function (data) { 
$("#someDiv").text(data); 
}

La página entera incluyendo etiquetas HTML se colocará como texto para que puede ver las etiquetas Puede recortar la página para obtener solo los scripts que desee, pero pregúntese si es inteligente hacerlo.

La cosa es que ... si sólo guardar el script como presentar una Js externos se podía cargarlo en el Ajax como texto :)

Fuente

2010-12-13 17:45:25

Sé que puedo volcar todo en un div, pero recortar la página para obtener solo los guiones que quiero es realmente el quid de mi pregunta. Necesito usar los selectores de jQuery para obtener las etiquetas, pero no sé cómo especificar el documento para seleccionar. Además, como dije antes, no puedo poner el JS en un archivo externo porque se está generando dinámicamente según la página en la que se encuentre, etc. – esvendsen

si se genera dinámicamente, solo muestra el código generado dinámicamente en una var en jQuery también y puede dar salida de todos modos que desee :) –

Los temas principales son ... esperando los elementos <script> ser hijos de <div id='scripts'>, y el uso de .find() en lugar de .filter().

Al usar jQuery's $.get() y , la data devuelta es una cadena de texto. Cuando coloca data en un contenedor jQuery, $data = $(data), se convierte en una matriz: [p, div#scripts, div#divs, div#dataDiv, <script.dataScript>, <script.dataScript>]. ¿Notaste que los elementos <script> ya no son secundarios de <div id='scripts'> pero en la raíz? jQuery lo hizo a propósito.

$dataScripts = $data.filter('script.dataScripts') nos dará una colección que ahora podemos recorrer este modo:

$dataScripts.each(function(i) { 
    $('#scriptOutput').append($(this)); 
});

Esto le evaluar los scripts en $dataScripts, no insertarlos en el DOM como @Emmett mencionado.

Fuente

2016-12-05 17:28:19 rocky

Cuestiones relacionadas