Dynamically load XML with CSS styling

Question

I want to load an XML file and its CSS stylesheets into a textarea ordiv. Each XML file has CSS stylesheets that display it correctly:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="first.css"?>
<?xml-stylesheet href="second.css"?>
<book>
  <sentence>
  !!! SNIP !!!

If I load the file directly into a web browser by typing its URL into the address bar, it is displayed correctly, including all styling. Now I want to display it the same way, loading it dynamically.

I have tried several variations on this, e.g.

<textarea id="display">
</textarea>

$.ajax({
    type: "GET",
    url: "https://raw.githubusercontent.com/someplace/my.xml",
    dataType: "text",
    success: function(xml) {
        alert("GET succeeded")
        var xmlDoc = $.parseXML(xml);
        document.getElementById("display").append(xmlDoc.childNodes);    
    }
});

I can't figure out how to dynamically apply styles to the parsed XML document and display it. I don't want to convert it to HTML, I just want to show the same documents that already display properly in the web browser.

Anyone know how to do this?

score 2 · Accepted Answer · answered Jun 08 '17 at 19:46

2

The point of XML and CSS is that it renders fine in a browser. But why in a textarea? You could display it with an iframe tag instead, if the tag in which it is displayed does not matter too much. By changing the src attribute of that iframe, you can load it dynamically.

answered Jun 08 '17 at 19:46

Code4R7

2,600
1
19
42

Thanks - I'll give that a try. I don't care what the tag is, as long as it works. I've heard people say that frames are to be avoided, but I'm not sure why. – Jonathan Jun 08 '17 at 19:54
An `iframe` is essencially another browser window displayed in the same page. People have tried to fool users in many ways, and exploiting the `iframe` is one of them, it does not show the actuall adress it uses to the user via the address bar. But that it is no reason to avoid it if you have a good use case. – Code4R7 Jun 08 '17 at 20:00
I tried just setting the src attribute, but I got a message saying: Refused to display 'https://raw.githubusercontent.com/some/file.xml' in a frame because it set 'X-Frame-Options' to 'deny'. – Jonathan Jun 08 '17 at 20:09
Is the XML from the same domain? Have a look at [this](https://stackoverflow.com/questions/6666423/overcoming-display-forbidden-by-x-frame-options). – Code4R7 Jun 08 '17 at 20:11
DOH! That means serving the pages from Github's raw pages won't work, then? I can check them out to a subdirectory in the same domain as the page. – Jonathan Jun 08 '17 at 20:18
Works like a charm! Thanks, @Code4R7! – Jonathan Jun 08 '17 at 20:46

Dynamically load XML with CSS styling

1 Answers1