How do I replace the entire HTML node using jQuery
JavascriptJqueryJavascript Problem Overview
I have a string which looks like:
<html><head><title>example</title></head><body>some example text</body></html>
I get this string returned as a result to an AJAX request.
I would like the browser to render and display that string. The idea would be to do something like:
$('html').parent().html(myString);
Well, that doesn't work. I've attempted to use an IFRAME but I haven't figured out how to get that to work either.
Note: It is impossible for me to change this string. It is also impossible for me to regenerate this string in a subsequent call to the server (otherwise I could just redirect the browser to that url).
Javascript Solutions
Solution 1 - Javascript
The document.open/write/close methods will do what you want:
var newDoc = document.open("text/html", "replace");
newDoc.write(myString);
newDoc.close();
Unless you pass in the replace parameter, the document.open call adds page history. So users would have to click back twice to go to the previous page.
Solution 2 - Javascript
You could just strip out the html tags, and then put everything inside the html element:
$('html').html(myString.replace(/<html>(.*)<\/html>/, "$1"));
Solution 3 - Javascript
At least in firefox(47.0) the solution:
var newDoc = document.open("text/html", "replace");
newDoc.write(response);
newDoc.close();
does not work as suggested since pressing the back button on firefox still loads the previous history entry - i.e. the entire point of using "replace" is to avoid having users click their back button only to be greeted by the view of the page before the last time the document.write() was called. The way of doing this that does not cause the aforementioned effect is simply calling methods on the document object directly:
document.open("text/html", "replace");
document.write(response);
document.close();
Using the replace option not only avoids filling the users history with garbage, but also helps in dealing with the issues that arise from the weird ways in which browsers often handle the history entries created by javascript, as sometimes allowing the browser to log the changes made to the document by javascript in history might have unexpected results when handling the back/forward operations (for instance adding 'wyciwyg://(somenumber)' to the url after performing a document.write() on the document that had its history reverted to a previous state).
Solution 4 - Javascript
Another variation to try might be
$('html').replaceWith(myString);
Solution 5 - Javascript
document.documentElement.innerHTML = myString;
It works except for IE9.