Recupero dell'html originale, anziché dell'html reso, con jquery

Question

Ho aggiunto una cronologia twitter a un sito Web. Rende e se clicco vista origine sulla pagina, posso vedere lo stesso Twitter widget di html che ho aggiunto al sito:

<div id='twitterDiv'> 
    <a class="twitter-timeline" 
     href="https://twitter.com/twitterName" 
     data-widget-id="123456789"> 
    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> 

Ma quando mi afferra il codice HTML del div contenitore utilizzando jQuery, $('#twitterDiv').html(); esso recupera l'iframe reso che Twitter genera anziché l'HTML originale:

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

come recuperare il codice HTML originale, non l'iframe reso?

Answer 1

Quando viene caricato lo script di Twitter, sostituisce l'HTML originale con un iframe. JQuery ha solo accesso al nuovo codice HTML, non a quello originale.

Quello che puoi fare è salvare l'HTML originale in una variabile prima che venga caricato lo script di 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> 

È possibile utilizzare questa variabile più avanti nel Javascript.

Answer 2

Hai trovato iframe con $('#twitterDiv').html(); questo comando, perché si esegue dopo twitter widget è divenuta all'interno del div. Quindi, per ottenere l'html originale, è necessario recuperarlo prima del rendering di twitter widget. Così il vostro codice sarà simile a questo:

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

Answer 3

Si consiglia di provare l'evento DOMNodeRemoved per leggere il contenuto quando gli elementi sono sempre rimossi.

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