How to view the html code that is used to display hidden json data?


Tags: javascript,html,css,json,youtube

Problem :

I'm trying to see the source code of some hidden data encoded using JSON and then shown in a webpage. If I am correct, javascript will process the data and then show it in the browser using html + css. I'm not interested in the data, but in the html and css that the javascript uses to display the encoded JSON data. I can't find it after hours of trying.

The website I'm experimenting on is YouTube and the data there is the comments. I can't find the the CSS and HTML that YouTube uses to display the comments. You can test on any video on YouTube https://www.youtube.com/watch?v=OWsyrnOBsJs. What I tried:

1) Viewing the source code. All I got was that the comments are called from div that has the id="comments-test-iframe". The code shown on YouTube site.

<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) File Save Page As > Web Page, Complete in both Firefox and Chrome. Comments would still be retrieved but from YouTube. So I couldn't get to see the css and html that YouTube uses to display the comments.

3) I tried to install Firebug 2.0. I was able to see was the container used to display comments. again I couldn't see the html + css that is used to display the comments. What I got was only:

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

which is the div element or container that YouTube uses to display the comments. But however no comments.

4) I tried to use [Html Clipper] (https://github.com/florentin/htmlclipper) which is a bookmarklet which lets you copy html sections of any web pages together with the attached css styles, it didn't work also.

How can I get to see that css+html? Is there an easy to save what the browser is displaying literally avoiding to go Firebug and inspect? I'm curious what is the trick that Google is using here also?



Solution :

The code YouTube is generating is thus...

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

The comments are shown with an iframe and are hosted on https://plus.googleapis.com. This has security settings set up so you can't access them directly by going to that URL. Firebug should allow you to inspect them within the YouTube page, however. Not sure why you will have had difficulty doing that.

I have copied the iframe's code here: http://jsfiddle.net/dCYTA/ - firebug is probably also your friend here, as the raw code is pretty messy.


    CSS Howto..

    how to vertically center align div elements with contents other than text

    How to create background css div/rounded corners?

    How to overcome Selenium CSS parent only CSS selector limitation

    How do I scale the size of the elements in my HTML according to screen size?

    How to crop/cut off an image so it fits the height of the browser window?

    How to add dynamic CSS source urls in Squishit?

    How to make text responsive to div size?

    how to target IE 6 AND IE7 in css

    How do I add a placeholder for vertical scrollbar with twitter bootstrap 2.0?

    How to use @RenderPage to include CSS content inline - MVC Razor

    How to use objects returned by a function?

    How to minify and combine commented out css files

    How to Style Specific Element On Hover With CSS?

    how to set the css left property of a class on the basis of an ID of a tag

    How do I execute a LESS guard when a boolean is not true?

    Jquery content slider, how to duplicate without redundant code

    How to set width of a
    in CSS to X number of pixels less than the width:auto?

    How to add second level to a submenu in a dropdown navigation css

    In CSS, how to create automatic section numbering only when there are multiple sections?

    How do I give a JavaFX TextField a Swing-style lowered bevel border?

    How can i use ng-class variable from controller?

    How to test for existence of CSS class in JavaScript without jQuery?

    How to scale html font size in Bootstrap 4 without breaking responsive navbar

    How to create a texture paper background using CSS without image

    How to animate text with css font-weight property in jQuery ? normal to bold

    How to reduce size of a text with police roboto on a small scren

    CSS: position: absolute together with margin: auto for centering - How does that work?

    How can a

    CSS: how to remove the indent of list items shown in Firefox

    How to align images and text in css?