Forum How do I...?

Can I load a external HTML via JS?

luizbgomide
I have a HTML document that I want to transform using JS, and for that I need to load another HTML document that has translation strings for it.
I hope to get those translation strings in an array and then apply those to the first document.

I'm not fluent in Javascript, but I think I understand what I could do to make that. Maybe using prince-script via CSS (I don't know if I can pass an attribute or element content as parameter) or by initializing a localation funcion that apply the translation strings to every element that needs it, before formating the document.

How would I go do that in JS? Considering the following sources:
main.html
localization.html
code.js
style.css
mikeday
It might be easier if the localization strings were expressed as a JavaScript array, then it would be simple to load it as another script. Is it possible to use this approach?
luizbgomide
@mikeday, that could be done. But for that I would need to have to run an external script that converted the HTML with translation strings to a javascript array.
And if I need to do that I would rather run a script that apply the translation strings directly into the main.html adding the stylesheet with it, and then I would just need to run prince on the main.html.

If possible I would like to run everything from Prince...
mikeday
I'm actually finding this a bit tricky to do in JavaScript, mostly for loading the second HTML file. Perhaps it can be done with XMLHttpRequest, but we have not implemented all the methods for this yet and also it does not load local files, only remote HTTP resources, so it's going to require some more experimentation.
luizbgomide
I gave up for now, and made a script that preformat the input file with the required localization strings. I'm now developing the style sheet it.
hallvord
Hi, this is indeed possible with XMLHttpRequest but might not be particularly elegant - as Mike says loading a JS array (JSON) would be cleaner. Glad you found a way to do things - for the record, this would be the approach if you wanted a 100% Prince-based solution:

1) localization.html needs to come from a server - Prince does not support XMLHttpRequest on file://. You can run a local server or upload it somewhere
2) Inline after the content or from onload, do a normal XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.open('GET', url_to_localization_html_file, false); // false will basically be ignored
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){updateStrings(xhr.responseText);}
}
xhr.send();


You would have to implement the updateStrings() method, which is quite possibly the harder part..

Announcement: repos for tests/utils

mikeday
Perhaps can use the DOMParser interface to parse the responseText to a HTML document.