Changing the content type of an iframe to xml to display xml and manipulate it through DOM

I would like to use JavaScript to do the following:

Build an XML file
display it in an iframe
manipulate the content through DOM

I'm building an XML editor and am having trouble displaying the xml in an iFrame.

this is the code that I'm using at the moment.

function previewContent(what){//changes the content of an iFrame
    var tsite = document.getElementById('xmlinside').contentDocument;
    tsite.open();
    tsite.contentType('text/xml');
    tsite.writeln(what);
    tsite.close();
}

function makeXML(){
    var tester = '<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\
    <bookstore>test</bookstore>';
    previewContent(tester);
}

without the tsite.contentType('text/xml') the iframe simply displays test.

when I check the source it's still in HTML with the added line <bookstore>test</bookstore> added and the xml version as a comment.

I would like it to display like a browser without a stylesheet. I know Safari displays it as a raw xml file if there is no formatting associated with it. This would be perfect. Is it the content type that is messing up? That's why I tried changing it but this is the wrong code. Any help would be great!

Solution

A few things to keep in mind...

1.) If it's content loaded via AJAX you will need to use the application/xml media type/mime and the first element has to have a namespace...

<div id="root_most_ajax_element" xmlns="http://www.w3.org/1999/xhtml">
<p>ajax content</p>
</div>

2.) Never use innerHTML (and frameworks as they rely heavily on innerHTML) and most especially never use it in conjunction with loading AJAX loaded content, the proprietary Microsoft method does not correctly register the DOM so you sort of see that the code is there but it's not really there thus making your code wholly unreliable at that point. If using JavaScript use the importNode method to load AJAX loaded content (instead of using an iframe, you can import it to a division element instead).

3.) You won't (and shouldn't) be able to access (X)HTML of an iframe if it's not loaded from the same domain so if it's being loaded from a third party website forget about it otherwise you could say manipulate the text and discover their information (phone, email, etc if they're signed in to something).

If you meet those three conditions you should be able to work with code as if there were no iframes or AJAX involved to begin with.