javascript - ejemplos - Recuperando el html original, en lugar del html representado, con jquery

jquery replace text

Question

Agregué una línea de tiempo de Twitter a un sitio web. Se procesa y si hago clic en Ver fuente en la página, puedo ver el mismo widget de twitter html que agregué al sitio:

<div id=''twitterDiv''>
<a class="twitter-timeline"
href="https://twitter.com/twitterName"
data-widget-id="123456789012344567">
Tweets by @goodName
</a>
<script type="text/javascript">
window.twttr = (function (d, s, id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id; js.src= "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>
</div>

Pero cuando tomo el html del div que lo contiene usando jquery, $(''#twitterDiv'').html(); recupera el iframe renderizado que genera twitter en lugar del html original:

<p data-twttr-id="twttr-sandbox-0"><iframe style="border: none; max-width: 100%; min-width: 180px; width: 238px;" height="600" scrolling="no" frameborder="0"></iframe></p>
<p>
<script type="text/javascript">
window.twttr = (function (d, s, id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id; js.src= "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>

¿Cómo recuperar el html original, no el iframe renderizado?

Answer 1

Cuando se carga el script de Twitter, reemplaza el HTML original con un iframe. JQuery solo tiene acceso al nuevo HTML, no al original.

Lo que puedes hacer es guardar el HTML original en una variable antes de que se cargue el script de Twitter.

<a class="twitter-timeline" id=twitter-timeline1 ...>
Tweets by @goodName
</a>
<script type="text/javascript">
var original_twitter_html=document.getElementById(''twitter-timeline1'').innerHTML
window.twttr = ...
</script>

Puede usar esta variable más adelante en su Javascript.

Answer 2

Es posible que desee probar el evento DOMNodeRemoved para leer el contenido cuando se eliminen los elementos.

$( "#questions" ).bind("DOMNodeRemoved",function( objEvent ){
console.log(objEvent)
});

Answer 3

$(''#twitterDiv'').html(); iframe con $(''#twitterDiv'').html(); este comando porque lo está ejecutando después de que el twitter widget se haya procesado dentro del div . Entonces, para obtener el html original, tendrá que buscarlo antes de que se twitter widget . Entonces tu código será así:

<script type="text/javascript">
$(document).ready(function(){
var html = $("#twitterDiv").html();
alert(html);
})
$(window).load(function(){
window.twttr = (function (d, s, id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id; js.src= "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, "script", "twitter-wjs"));
});
</script>