javascript - Retrieving the original html, rather than the rendered html, with jquery - Stack Overflow

admin管理员组

文章数量:1431721

I've added a twitter timeline to a website. It renders and if I click view source on the page, I can see the same twitter widget html that I added to the site:

<div id='twitterDiv'>
    <a class="twitter-timeline"
      href=""
      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=     ".js";
      fjs.parentNode.insertBefore(js, fjs);
      return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
    }(document, "script", "twitter-wjs"));
    </script>
</div>

But when I grab the html from the div containing it using jquery, $('#twitterDiv').html(); it retrieves the rendered iframe that twitter generates instead of the original html:

<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= ".js";
  fjs.parentNode.insertBefore(js, fjs);
  return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>

How to retrieve the original html, not the rendered iframe?

I've added a twitter timeline to a website. It renders and if I click view source on the page, I can see the same twitter widget html that I added to the site:

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

But when I grab the html from the div containing it using jquery, $('#twitterDiv').html(); it retrieves the rendered iframe that twitter generates instead of the original html:

<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./widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
  return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>

How to retrieve the original html, not the rendered iframe?

• javascript
• jquery
• iframe
• twitter

Share Improve this question Follow edited Feb 7, 2017 at 15:26 Andrew asked Dec 10, 2014 at 15:14 AndrewAndrew 20.2k1313 gold badges108108 silver badges122122 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9 +25

When the Twitter script loads, it replaces the original HTML with an iframe. JQuery only has access to the new HTML, not the original one.

What you can do is save the original HTML in a variable before the Twitter script loads.

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

You can use this variable later on in your Javascript.

You are getting iframe with $('#twitterDiv').html(); this mand because you are running it after twitter widget has been rendered inside the div. So in order to get the original html you will have to fetch it before twitter widget is rendered. So your code will be like this:

<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./widgets.js";
            fjs.parentNode.insertBefore(js, fjs);
            return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
        }(document, "script", "twitter-wjs"));
    });
</script>

You may want to try the DOMNodeRemoved event to read the the content when the elements are getting removed.

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

本文标签：