Provare a selezionare i tag di script da un jQuery ajax ottenere risposta

Sono sulla pagina A. Un collegamento è cliccato, e sto caricando nel DOM tramite jQuery get dalla pagina B. All'interno della pagina B's DOM sono più generati dinamicamente tag di script con la classe "dataScript" insieme a una serie di altri tag di script con cui non voglio avere nulla a che fare.Provare a selezionare i tag di script da un jQuery ajax ottenere risposta

L'unica cosa che voglio da quel DOM sono i tag .dataScript, che poi voglio inserire in un div con un ID di "scriptOutput" nel DOM della pagina A. Questo non funzionerà se l'elemento con la classe di "dataScript" è un tag di script. Solo se si tratta di un altro tag, come un tag "div". Ecco un esempio di quello che sto cercando di fare:

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

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

Ho provato aggiungendo .contents(), .html() e .text() per il contenuto .dataScript, ma nulla sembra funzionare. Grazie per la tua considerazione nel guardare/rispondere alle mie domande. Apprezzo il vostro aiuto!

UPDATE:

Nel caso in cui nessun altro sta cercando di fare questo, qui è la meno-che-elegante, ma la soluzione pienamente funzionale ho finito con:

uscita JavaScript come testo normale (nessun tag di script) all'interno di un div (con ID e impostato per visualizzare: nessuno) nella pagina B. Quindi nella pagina A, effettuare le seguenti operazioni all'interno della funzione di richiamata della richiesta 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

Grazie a Emmett per avermi ricordato del metodo document.createElement.

fonte

2010-12-13 esvendsen

Questo potrebbe essere dovuto al fatto che 'class' non è un attributo valido su'

Se si carica il risultato AJAX in questo modo:

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

e spingerlo in un div come questo:

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

la pagina intera compresi i tag HTML verrà inserito come testo in modo da può vedere i tag. Puoi tagliare la pagina per ottenere solo gli script che vuoi, ma chiediti se è intelligente farlo.

Il fatto è che ... se si salva lo script come un file delle .js esterni è possibile caricare in ajax come testo :)

fonte

2010-12-13 17:45:25

So che posso scaricare tutto in un div, ma tagliare la pagina per ottenere solo gli script che voglio è davvero il punto cruciale della mia domanda. Devo usare i selettori jQuery per ottenere i tag, ma non so come specificare il documento da cui selezionare. Inoltre, come ho detto sopra, non posso mettere il JS in un file esterno perché viene generato dinamicamente in base alla pagina in cui ti trovi, ecc. – esvendsen

se è generato dinamicamente, basta emettere il codice generato dinamicamente in una var anche in jQuery e puoi farlo comunque lo vuoi :) –

Le questioni principali sono ... aspettate il <script> elementi per essere figli di <div id='scripts'>, e utilizzando .find() invece di .filter().

Quando si utilizza jQuery $.get() e $.ajax(), il valore restituito data è una stringa di testo. Quando inserisci data in un wrapper jQuery, $data = $(data), viene convertito in un array: [p, div#scripts, div#divs, div#dataDiv, <script.dataScript>, <script.dataScript>]. Hai notato che gli elementi <script> non sono più figli di <div id='scripts'> ma alla radice? jQuery l'ha fatto apposta.

$dataScripts = $data.filter('script.dataScripts') ci darà una collezione ora possiamo iterare in questo modo:

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

Ciò valutare gli script in $dataScripts, non inserirli nel DOM come @Emmett menzionato.

fonte

2016-12-05 17:28:19 rocky

Problemi correlati