在磁盘上的新浏览器选项卡中使用 javascript 以编程方式打开 html 文件

Question

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

I would want the user to select an html file using the <input type="file"> . After selecting a file, some JavaScript code will open that html file.

Answer 1

You can use the File API for that. You could do something like the following example.

Here is a live example

Tested it only in the latest Chrome & Firefox versions.

HTML:

<form action="">
    <p><input type="file" id="userFile"></p>
</form>

<p><a href="" target="_blank" id="newTab" style="display:none">Open File</a></p>
<div id="preview"></div>

**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 file..., and wait to complete. fileReader.readAsDataURL(file); // When done reading. fileReader.onload = function(e) { //console.log(e.target.result); iframe.src = e.target.result; iframe.width = '100%'; iframe.height = 500; newTab.href = e.target.result; newTab.style.display = 'block'; preview.appendChild(iframe); }; } }; fileutil.init(); }(this));

UPDATE: ------- This example gives access to the iframe's document, therefore allowing you to communicate with it and change its contents.

JSFiddle: http://jsfiddle.net/Lxx56hh4/

JS:

 (function(window, undefined) { var doc = window.document, userFile = doc.getElementById('userFile'), preview = doc.getElementById('preview'), // We read the file as Text and then parse it into a DOM Document. fileReader = new FileReader(), domParser = new DOMParser(); var fileutil = { init: function() { userFile.addEventListener('change', fileutil.onchange, false); }, onchange: function(e) { fileutil.create(this.files[0]); }, create: function(file) { var self = this; // An iframe to append the new Document to. this.iframe = doc.createElement('iframe'); this.iframe.width = '100%'; this.iframe.height = 300; // Start reading the file as plain text and wait to complete. fileReader.readAsText(file); // When done reading. fileReader.onload = function(e) { if (e.target.readyState === 2) { // 2 means DONE 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 out of the text contents. var fileDocument = domParser.parseFromString(ihtml, "text/html"); // Make the iframe's body equal the fileDocument's body. // We do this so we get only the body's contents and not the whole document. idocument.body.innerHTML = fileDocument.body.innerHTML; // We can now communicate with the iframe's body to add or remove elements. // With jQuery you can do: // `$(idocument.body).prepend('<h1>Injected H1.</h1>')` // // NOTE: Any resources such as stylesheets, images, and scripts referenced in fileDocument may not be available in the iframe. // // With VanillaJS you can do: idocument.body.insertAdjacentHTML('afterbegin', '<h1>Injected H1.</h1>'); // Using XHR2 you can now 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:

 <form action=""> <p><input type="file" id="userFile"></p> </form> <div id="preview"></div>