Wie eine externe HTML-Datei

Question

ich einige HTML müssen geladen werden, wie folgt:

Select a file : <input type="file"><br><br> 
Html Codes : <textarea id="displayHtml"></textarea><br><br> 
<div id="displayPage">Display the Html Page here</div> 

Nun, wie würde ich eine externe HTML-Datei von einer lokalen Festplatte und zeigt die Seitenvorschau in der div #displayPage und erhalten sehen die HTML-Tags der Datei in das Textfeld #displayHtml? Ich habe keine Ahnung, wie das geht, also bitte helfen.

Meine Geige ist hier: https://jsfiddle.net/zm6ga2ev/1/

Answer 1

Sie nur .load anderen Seite Inhalt in div.

//Load full document 
$('#displayPage').load('http://same-domain.com/next-page.html'); 

// You can use any CSS selector to load only part of page 
$('#displayPage').load('http://same-domain.com/next-page.html #some-inner-id > *'); 

Wenn #displayPage Element nicht in DOM gefunden wird, als wird keine Anfrage durchgeführt werden! Wenn #some-inner-id nicht im DOM der Anfrageseite gefunden wird, erhalten Sie einen leeren Inhalt.

---

Hinweis

Loaded Seite muss Cross-Origin Anfrage erlaubt (in der Regel bedeutet dies, gleiche Domain Anfrage). Suchen Sie nach here für Cross-Origin-Anfragen.

Answer 2

Lassen Sie den Benutzer die HTML-Datei auf Ihren Server hochladen.

Hier ist eine schöne Möglichkeit, Dateien über Ajax hochladen: http://code.tutsplus.com/tutorials/uploading-files-with-ajax--net-21077

Jetzt können Sie diesen Code verwenden, um HTML-Datei in das div-Tag

document.getElementById("displayPage").innerHTML='<object type="text/html" data="page.html" ></object>'; 

Oder verwenden Sie einfach jquery .load() Funktion

zu laden

Answer 3

Sie können dies mithilfe der Datei-API in HTML5 tun.

Hier ist ein schnelles & schmutzig JS Beispiel:

function handleFileSelect(evt) { 
    var file = evt.target.files[0]; // File inputs are an array - get the first element 
    var reader = new FileReader(); 

    reader.onload = function(e) { 
    // Render the supplied file 
    document.getElementById('displayHtml').value = e.target.result 
    document.getElementById('displayPage').innerHTML = e.target.result; 
    }; 

    // Read in the HTML file. 
    reader.readAsText(file); 
}; 

document.getElementById('fileInput').addEventListener('change', handleFileSelect, false); 

JSFiddle: https://jsfiddle.net/8te1hyv9/

Eine ordentliche Erklärung und umfassende Beispiele dafür, wie alles paßt zusammen zu finden unter: http://www.html5rocks.com/en/tutorials/file/dndfiles/