Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I know this question is old, but I ran into the same issue while playing with a document fragment because I didn't realize that I had to append a div to it and use the div's <code>innerHTML</code> to load strings of HTML in and get DOM Elements from it. I've got other answers on how to do this sort of thing, better suited for <strong>whole</strong> documents.</p> <p>In firefox (23.0.1) it appears that setting the innerHTML property of the document fragment doesn't automatically generate the elements. It is only after appending the fragment to the document that the elements are created.</p> <p>To create a <strong>whole</strong> document use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.implementation" rel="nofollow"><code>document.implementation</code></a> methods if they're supported. I've had success doing this on Firefox, I haven't really tested it out on other browsers though. You can look at <a href="https://github.com/matthewkastor/AtropaToolbox-raw-js/blob/gh-pages/Toolbox/enabled/HTMLParser.js" rel="nofollow">HTMLParser.js</a> in the AtropaToolbox for an example of using <code>document.implementation</code> methods. I've used this bit of script to <code>XMLHttpRequest</code> pages and manipulate them or extract data from them. Scripts in the page are not executed though, which is what I wanted though it may not be what you want. The reason I went with this rather verbose method instead of trying to use the parsing available from the <code>XMLHttpRequest</code> object directly was that I ran into quite a bit of trouble with parsing errors at the time and I wanted to specify that the doc should be parsed as HTML 4 Transitional because it seems to take all kinds of slop and produce a DOM.</p> <p>There is also a <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMParser" rel="nofollow"><code>DOMParser</code></a> available which may be easier for you to use. There is an implementation by Eli Grey on the page at MDN for browsers that don't have the <code>DOMParser</code> but do support <code>document.implementation.createHTMLDocument</code>. The specs for <code>DOMParser</code> specify that scripts in the page are not executed and the contents of noscript tags be rendered.</p> <p>If you really need scripts enabled in the page you could create an iFrame with 0 height, 0 width, no borders, etc. It would still be in the page but you could hide it pretty well.</p> <p>There's also the option of using <code>window.open()</code> with <code>document.write</code>, DOM methods or whatever you like. Some browsers even let you do data URI's now.</p> <pre><code>var x = window.open( 'data:text/html;base64,' + btoa('&lt;h1&gt;hi&lt;/h1&gt;') ); // wait for the document to load. It only takes a few milliseconds // but we'll wait for 5 seconds so you can watch the child window // change. setTimeout(function () { console.log(x.document.documentElement.outerHTML); x.console.log('this is the console in the child window'); x.document.body.innerHTML = 'oh wow'; }, 5000); </code></pre> <p>So, you do have a few options for creating <strong>whole</strong> documents offscreen/hidden and manipulating them, all of which support loading the document from strings.</p> <p>There's also <a href="http://phantomjs.org/" rel="nofollow">phantomjs</a>, an awesome project producing a headless scriptable web browser based on webkit. You'll have access to the local filesystem and be able to do pretty much whatever you want. I don't really know what you're trying to accomplish with your full page scripting and manipulation.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload