使用jQuery检索原始HTML而不是呈现的HTML

Question

我在网站上添加了一个Twitter时间线。它能够呈现，如果我点击页面上的查看源代码，我可以看到我添加到该网站中的同样的Twitter小部件HTML：

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

但是当我使用jquery从包含它的div中获取html时，$('#twitterDiv').html();它会检索到Twitter生成的呈现iframe而不是原始的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.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>

如何检索原始HTML，而不是呈现的iframe？

- Andrew

Answer 1

当Twitter脚本加载时，它会用一个iframe替换原始HTML。JQuery只能访问新的HTML，而不能访问原始的HTML。

您可以在Twitter脚本加载之前将原始HTML保存在一个变量中。

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

您可以在稍后的JavaScript中使用此变量。

- Leo Jiang

---

只是为了记录，解决方案确实是在将原始HTML添加到页面之前将其保存到一个变量中，而不是从页面上获取它。 - Andrew

Answer 2

你使用 $('#twitterDiv').html(); 命令获取的是 iframe，因为你在 twitter widget 在 div 内渲染后才运行该命令。因此，为了获取原始的 HTML，你需要在 twitter widget 渲染之前获取它。所以你的代码应该像这样：

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

- Mangesh Parte

---

如果JQuery没有被缓存，用户必须等待JQuery加载完毕才能看到Twitter按钮。 - Leo Jiang

Answer 3

你可以尝试使用DOMNodeRemoved事件来读取元素被移除时的内容。

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

- thunder