Question

我正在尝试查看使用JSON编码的某些隐藏数据的源代码，然后显示在网页中。如果我是正确的，javascript将处理数据，然后使用html + css在浏览器中显示它。我对数据不感兴趣，但是在javascript和css中，javascript用来显示编码的JSON数据。经过几个小时的努力，我找不到它。

我正在试验的网站是YouTube，其中的数据是评论。我找不到YouTube用来显示评论的CSS和HTML。您可以在YouTube https://www.youtube.com/watch?v=OWsyrnOBsJs上测试任何视频。我尝试了什么：

1）查看源代码。我得到的只是从具有 id =“comments-test-iframe”的div调用注释。 YouTube网站上显示的代码。

<div class="comments-iframe-container">
    <div id="comments-test-iframe"></div>
    <div id="distiller-spinner" class="action-panel-loading">
        <p class="yt-spinner">
      <img src="https://s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif" class="yt-spinner-img" alt="Loading icon">

    <span class="yt-spinner-message">
Loading...
    </span>
  </p>

    </div>
  </div>
  </div>

2）文件将页面另存为＆gt; Firefox和Chrome中的网页，完整。仍会从YouTube检索评论。所以我无法看到YouTube用来显示评论的css和html。

3）我尝试安装Firebug 2.0。我能够看到用于显示评论的容器。再次，我看不到用于显示评论的html + css。我得到的只是：

<div id="comments-test-iframe" style="text-indent: 0px; margin: 0px; padding: 0px; background: none  repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 591px; height: 5375px;">

这是YouTube用于显示评论的div元素或容器。但是没有评论。

4）我尝试使用[Html Clipper]（https://github.com/florentin/htmlclipper）这是一个书签，它允许你复制任何网页的html部分和附加的CSS样式，它也不起作用。

我怎样才能看到css + html？是否有一个容易保存浏览器显示的字面上避免去Firebug和检查？我很好奇谷歌在这里使用的技巧是什么？

Answer 1

YouTube正在生成的代码就是......

  <div class="comments-iframe-container">
    <div style="text-indent: 0px; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 591px; height: 4799px;" id="comments-test-iframe"><iframe title="Comment on this" data-gapiattached="true" src="https://plus.googleapis.com/u/0/_/widget/render/comments?usegapi=1&amp;first_party_property=YOUTUBE&amp;href=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DOWsyrnOBsJs&amp;owner_id=o5--boVIi-ow0xAU3VyxMg&amp;query=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DOWsyrnOBsJs&amp;stream_id=UCo5--boVIi-ow0xAU3VyxMg&amp;substream_id=OWsyrnOBsJs&amp;view_type=FILTERED&amp;width=590&amp;youtube_video_acl=PUBLIC&amp;hl=en_GB&amp;origin=https%3A%2F%2Fwww.youtube.com&amp;search=%3Fv%3DOWsyrnOBsJs&amp;hash=&amp;gsrc=1p&amp;jsh=m%3B%2F_%2Fscs%2Fabc-static%2F_%2Fjs%2Fk%3Dgapi.gapi.en.TY07tiUU0tE.O%2Fm%3D__features__%2Frt%3Dj%2Fd%3D1%2Frs%3DAItRSTNfGmB_-do3YO3g20AHt3L6itPzpQ#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Confirsttimeplusonepromo%2Conthumbsup%2Contimestampclicked%2Conready%2Conupgradeaccount%2Conallcommentsclicked&amp;id=I0_1403359704352&amp;parent=https%3A%2F%2Fwww.youtube.com&amp;pfname=&amp;rpctoken=50836660" name="I0_1403359704352" id="I0_1403359704352" vspace="0" tabindex="0" style="position: static; top: 0px; width: 590px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 4799px;" scrolling="no" marginwidth="0" marginheight="0" hspace="0" frameborder="0" width="100%"></iframe></div>
    <div style="display: none;" id="distiller-spinner" class="action-panel-loading hid">
        <p class="yt-spinner">
      <img src="https://s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif" class="yt-spinner-img" alt="Loading icon">

    <span class="yt-spinner-message">
Loading...
    </span>
  </p>

    </div>
  </div>

评论以iframe显示，并托管在https://plus.googleapis.com上。这已设置安全设置，因此您无法通过转到该网址直接访问它们。但是，Firebug应该允许您在YouTube页面中检查它们。不知道你为什么会这样做有困难。

我在这里复制了iframe的代码：http://jsfiddle.net/dCYTA/ - firebug可能也是你的朋友，因为原始代码非常混乱。

Answer 2

如果我正确理解你的问题......我对这种方法很满意，虽然它可能不是你想要的。

我使用Firefox / Aurora。我用输出的HTML突出显示整个部分，然后右键单击并选择“查看选择源”。这使我可以看到当我只是做常规视图源时未显示的HTML。

如何查看用于显示隐藏的json数据的html代码？

2 个答案: