jquery - Open an html file programatically using javascript in a new browser tab from disk -

Is there a way to open an html file using Javascript in a new tab?

I want the user to & lt; Input type = "file" & gt; to select an HTML file. After choosing a file, some javascript code will open that file.

You can use the file API that. You can do something like the following example, here is a lively example:

It is only the latest Chrome & amp; Firefox version

HTML:

  & lt; Form action = "" & gt; & Lt; P & gt; & Lt; Input type = "file" id = "userFile" & gt; & Lt; / P & gt; & Lt; / Form & gt; & Lt; P & gt; & Lt; A href = "" target = "_ blank" id = "newTab" style = "display: none" & gt; Open file & lt; / A & gt; & Lt; / P & gt; & Lt; Div id = "preview" & gt; & Lt; / Div & gt;  

JS:

 ; (Function (window, undefined) {var doc = window.document, userFile = Doc.getElementById ('userFile'), newTab = doc.getElementById ('newTab'), preview = doc.getElementById ('preview'), fileReader = New FileReader (); var fileutil = {init: function () {userFile .addEventListener ('change', fileutil.onchange, false);}, onchange: function (e) {//console.log(this.files); Fileutil.create (this.files [0]);}, create: function (file) {//console.log(file); var iframe = doc.createElement ('iframe'); // start reading the file. ., And wait to complete. FileReader.readAsDataURL (file); // When Readread.fileReader.onload = function (e) {//console.log(e.target.result); iframe.src = e. Target.result; iframe.width = '100%'; iframe.height = 500; N EwTab.href = e.target.result; newTab.style.displ AI = 'block'; preview.appendChild ();}}}} fileutil.init ();} (this));  

Update:

This example has access to the documents of IFrame, thus you can communicate with it and its Allow to change the contents. . JSFiddle:

JS:

 ; (Function (window, undefined) {var doc = window. Document, userFile = doc.getElementById ('userFile'), preview = doc.getElementById ('preview'), // we read the file as text and then FileReader = New FileReader (), domParser = New DOMParser (); var filety = {init: function {userFile.addEventListener ('change', fileutil.onchange, false);}, Onchange: function (e) {fileutil.create (this.files [0]);}, create: function (file) {var self = it; // an iframe to add a new document. This.iframe = doc CreateElement ('iframe'); this.iframe.width = '100%'; This.iframe.height = 300; //f Start reading the file as plain text and Y to complete after the file reader.readAsText (file); // FileReader.onload = function (e) {if (e.target.readyState === 2) {// 2 means preview. AppendChild (self.iframe); fileutil._ready (e.target.result);}};}, _ready: function (ihtml) {var iwindow = this.iframe.contentWindow; Var idocument = Iwindow.contentDocument || Iwindow.document; // Create a DOM document from the text content Var file document = domParser.parseFromString (ihtml, "text / html"); // Make the body of iFrame equal to the file's document. // We do this so we only get body contents and not the whole document. Idocument.body.innerHTML = fileDocument.body.innerHTML; // Now we can communicate with the body of iframe to add or remove elements. // With JQuery you can: // `$ (idocument.body) .prepend ('& lt; h1 & gt; injection h 1. & lt; / h1 & gt;') '// // note : Scripted references in stylesheets, images, and file documents can not be available in iframe. // // You can do this with VanillaJS: idocument.body.insertAdjacentHTML ('later', '
 injection H1. & Lt; / h1 & gt;'); // Using XHR2 you can send the original file or DOMString to your server. // more here: http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-sending}}; Fileutil.init (); }(this));  

HTML:

& lt; Form action = "" & gt; & Lt; P & gt; & Lt; Input type = "file" id = "userFile" & gt; & Lt; / P & gt; & Lt; / Form & gt; & Lt; Div id = "preview" & gt; & Lt; / Div & gt;