What the right structure to display html plus a source page?

Question

I want to display a source web page with some information about it above the page in HTML. I initially though of doing this with frames, but as far as I can tell a frame can only display an HTML src, not raw html. To b e clear, if the frame tag was allowed to enclose raw html, I would want to do something like

<frameset rows="200,2*">
   <frame name="info>
      <h3>Stack Overflow</h3>
      <p>A site for programming questions</p>
  </frame>
  <frame name="site" src="http://stackoverflow.com">
</frameset>

What is the right way to do this?

Answer 1

You can use something like this:

In your HTML page, use:

<iframe src="get.php?url=http://google.com"></iframe>

And then, you create a php (or your server language) page:

<?php
header('Content-Type: text/plain; charset=utf-8');
echo file_get_contents($_GET['url']);
?>

This way you can load any webpage, and you even can change it with javascript without reloading your html page. But be aware that everybody can get any webpage using your get.php page.

Answer 2

There are several ways to do this:

• You can put the HTML-source code either inside a <pre> block, which leaves it raw, but it might break if your HTML-source itself contains a <pre> block.
• You escape the HTML code up front, e.g. using one of the online tools like http://www.htmlescape.net/htmlescape_tool.html
• You can load the HTML code with javascript, for example using jQuery and put it inside a <div> using the jQuery text function

Answer 3

Because this is not 1994 the best way is to not use frames. Joking aside sometimes frames can still be useful, but should be avoided if possible. The reasons for this are

1. You create a brand new window object. Unless you need a new window object you are wasting memory.
2. Some search engines used to not follow the URLs in frames. This might not be the case anymore for destinations on the same domain, but can still alter how your pages will be ranked and unless you know what you are doing you shouldn't use frames for sites that you want indexed.

If you must to use frames you will have to use a separate html file for each frame, or you could use an Iframe. But an iframe still comes with the above caveats.

You could also dynamically load a div or a td with JavaScript (jQuery, prototype, mootools, etc.. can help) but from an SEO perspective that's even worse than frames, and should be reserved for apps that require login, even then, they will stop back from working.

The closest thing to a frameset from a positioning point of view is the table. You can leave one column width unspecified and set the table width to 100% and that column will take up the maximum space available like the framesets "*" in the rows attribute. However the height of a table can not be set to 100% of the window without javascript so you can't do the same for height and rows. Here absolute positioning will help more than a table. For example

<div style="position: absolute; top: 0px; bottom: 0px; width: 100%">
    <div style="height: 200px; width: 100%; background: red;">Fixed Row</div>
    <div style="position: absolute; top: 200px; bottom: 0px; width: 100%; background: blue">Fluid Row</div>
</div>

Will behave like frame rows if they are the root element. To work inside another element that element must have width, height and positioning:relative.

Setting a fixed height and overflow:scroll in the style of any element, like a td or a div, in the earlier examples will give it scroll bars like a frame. Then you can have all the data on one page or include an iframe with 100% width and height for content on a different url, though as I mentioned the same caveats apply as with the frameset.