Schinckel.net

Now, I’m not talking here about using the “Show Source” feature of a Web Browser. Anyone worth even a quarter of a pinch of salt knows how to do that. What I’m trying to do is display the source of a web page as text/plain within another web page. This is so I can have a current version of my template available on a page of my blog. I’ve put a version up that I need to update, and I make so many changes to the template this is unsustainable.

Under Blogsome, the template files can be found in the /templates/ directory, and there are four of them: index.html, wp-layout.css, post.html and comments.html. Of these, only wp-layout.css is a plain text document, the rest are (naturally) text/html.

Now, HTML has a nice little feature called <object>, which should be able to display anything the browser can render. For example:

<object data=“/templates/index.html”> </object>

Will display a rendering of the Main Page template. It looks somewhat ugly, since it’s not been pre-processed by the Smarty Templating engine, so is somewhat useless – it’s neither the source nor the full result:

This element also has an attribute that should allow you to choose the content type: codetype.

<object data=“/templates/index.html” codetype=“text/plain”> </object>

This to me should be now rendering the object as a plain text document. But no, it still renders the HTML:

1 <object data="/templates/index.html"codetype="text/plain"></object>

I fiddled around with this for about an hour or so last night, trying to get it to work. The DOM tells me it’s text/plain, but the browser won’t render it as such.

So, after much more rooting around, I finally figured out a way to get the source to display: use XMLHttpRequest() to grab the data, and DOM manipulation to put it into the required location. This is what my page looks like:

 1     <h3 class="comments">Main Page (index.html)</h3>
 2     <textarea id="index.html" wrap="off"  style='width:95%;height:200px;'>
 3     </textarea>
 4 
 5     <h3 class="comments">Style Sheet (wp-layout.css)</h3>
 6     <textarea id="wp-layout.css" wrap="off" style='width:95%;height:200px;'>
 7     </textarea>
 8 
 9     <h3 class="comments">Post (post.html)</h3>
10     <textarea id="post.html" wrap="off" style='width:95%;height:200px;'>
11     </textarea>
12 
13     <h3 class="comments">Comments (comments.html)</h3>
14     <textarea id="comments.html" wrap="off" style='width:95%;height:200px;'>
15     </textarea>
16 
17     <script type="text/javascript">
18 
19     var div1 = document.getElementById("index.html");
20     var req1 = new XMLHttpRequest();
21     req1.open("GET", "/templates/index.html",true);
22     req1.send(""); 
23 
24     var div2 = document.getElementById("post.html");
25     var req2 = new XMLHttpRequest();
26     req2.open("GET", "/templates/post.html",true);
27     req2.send(""); 
28 
29     var div3 = document.getElementById("comments.html");
30     var req3 = new XMLHttpRequest();
31     req3.open("GET", "/templates/comments.html",true);
32     req3.send(""); 
33 
34     var div4 = document.getElementById("wp-layout.css");
35     var req4 = new XMLHttpRequest();
36     req4.open("GET", "/templates/wp-layout.css",true);
37     req4.send(""); 
38 
39     function Source(){
40         if (req1.status+req2.status+req3.status+req4.status == "800"){
41             div1.innerHTML = req1.responseText
42             div2.innerHTML = req2.responseText
43             div3.innerHTML = req3.responseText
44             div4.innerHTML = req4.responseText
45         } else
46             setTimeout("Source();",500);
47     }
48 
49     Source();
50     </script>

It’s not quite perfect: there are still some issues with the timings, but I’ll get there. At least it works, now. You may need to type javascript:Source() into the address bar to get it to work.

All I need to do now is some syntax styling!