1

Is possible for an iFrame to show the raw code of a source rather than rendering it out? If so how do you do that and can it be done on JavaScript?

Mogsdad
  • 44,709
  • 21
  • 151
  • 275
Philll_t
  • 4,267
  • 5
  • 45
  • 59
  • Nope. You'll have to use PHP or another language to generate raw text from the webpage. – Blender Oct 27 '11 at 19:39
  • Can you elaborate, what do you want to display the source code of? Does it need to be an iFrame of the actual content? Does it even need to be an iFrame? – Nick Q. Oct 27 '11 at 19:40
  • have you tried changing response mime type to `text/plain` which *could* instruct browser to treat response as plain text instead of HTML? And please elaborate on Javascript - where would you use it? In parent frame or in the frame that should display text - which is contradictory... – Robert Koritnik Oct 27 '11 at 19:41

4 Answers4

5

Not directly, but there's no reason it cannot be done with Javascript. Make an AJAX call to fetch the HTML source, HTML-encode a few key characters, and set the result as the contents of your frame or other element.

Community
  • 1
  • 1
Jon
  • 428,835
  • 81
  • 738
  • 806
  • 2
    JSFiddle demonstrating, getting the current page content: http://jsfiddle.net/7VabA/ – Nick Q. Oct 27 '11 at 19:49
  • Didn't want my couple minutes answering the question to go completely to waste. – Nick Q. Oct 27 '11 at 19:51
  • Thank you so much john! I was messing with it for a little bit. I took a similar approach to what you recommended. I had a PHP file build out the xml but the header was set to `type="text/txt"` and the iFrame displayed it perfectly! Thanks a lot bro! – Philll_t Oct 28 '11 at 04:30
4

You can set the src attribute to a page on your webserver that outputs the html as plain text and not as HTML. Therefor you must set the header info content-type to text/plain. Check this page to see how it's done in PHP: http://www.jonasjohn.de/snippets/php/headers.htm

There is no way to do this with html or js only. You'll need some server side language to render the page. Of course it is possible to retrieve the data from the webserver in js through an xmlhttprequest, better known as AJAX.

Bas Slagter
  • 9,831
  • 7
  • 47
  • 78
  • This is exactly what I was going for. It's a shame that the color doesn't stay with the syntax on safari in an iFrame. Baszz, thank you! – Philll_t Oct 28 '11 at 04:33
2

You have two main ways to do so:

  1. If you want to do it on the backend side, you have to modify the Content-Type header of the response to text/plain. That way, the browser will not render HTML code when loading the page. The implementation will depend on your stack.

  2. If you want to do it on the client side, with Javascript, you can extract the code from the iframe element, like so:

<iframe id="myIframe" src="https://example.org"></iframe>

<script>
const iframeElement = document.getElementById('myIframe');
let rawHtml = null;

// We extract the code each time the iframe element is loaded
// If we try to do it before that moment, we won't get any HTML
iframeElement.addEventListener('load', function () {
  console.log('HTML loaded and available in rawHTML variable');
  rawHtml = iframeElement.contentDocument.documentElement.innerHTML;
});
</script>

This snippet does not work on JSFiddle! I bet this is due to security measures taken when loading the iframe.

More about iframes and iframe security considerations: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

gdevdeiv
  • 111
  • 1
  • 7
0

No. You need a tool to convert the HTML into text to display.

myermian
  • 31,823
  • 24
  • 123
  • 215