2017-03-25 9 views
-4

HTMLファイルを別のHTMLファイルに読み込もうとしています。別のHTMLファイルをロードする

index.htmlを

<!DOCTYPE html> 
<html> 
    <body> 
     <div id="default"></div> 
     <script src="index.js"></script> 
    </body> 
</html> 

私はこれを使用するコードをJSたが、代わりにボタンを使用して、私は、ファイルが

index.js

を読み、innerHTMLプロパティのonloadイベントに渡されたい]をクリックします
window.onload = function() { 
     var fileInput = document.getElementById('fileInput'); 
     var fileDisplayArea = document.getElementById('fileDisplayArea'); 

     fileInput.addEventListener('change', function(e) { 
      var file = fileInput.files[0]; 
      var textType = /text.*/; 

      if (file.type.match(textType)) { 
       var reader = new FileReader(); 

       reader.onload = function(e) { 
        fileDisplayArea.innerText = reader.result; 
       } 

       reader.readAsText(file);  
      } else { 
       fileDisplayArea.innerText = "File not supported!" 
      } 
     }); 
} 

ありがとうございます、ありがとうございます。ここでもwindow.onload = function()が必要ですか? HTMLで

+0

jquery –

+0

私は上記の例のようにjavascript FileReaderを使用してこれを行うことができます。上記の例のコードで変更する必要があるのは、入力クリックを使用してファイルをアップロードするのではなく、指定したフォルダ/ディレクトリからファイルを直接読み込みたい場合です。私はすべてを動的に変更するためにバックエンドコーディングを行うことができるようにjavascriptを使用することを好みます。 –

答えて

0

あなたはインラインフレーム

<!DOCTYPE html> 
<html> 
<body> 

<iframe src="header.html"> 
    <p> display</p> 
</iframe> 

</body> 
</html> 

を使用して1つのHTMLファイルに他のHTMLファイルをロードすることができますかあなたはこれを試すのiframeなく、これらのコミュニティは

How to include an HTML page into another HTML page without frame/iframe?

Insert one HTML file into another HTML file

をリンク参照することができます あなたの部門にIDを与える

document.getElementById("your div id").innerHTML='<object type="text/html" data="home.html" ></object>'; 
+0

本当にiframeを使いたくないのですが、標準のjavascriptだけで対処します –

+0

私は答えを更新しました – vikash

関連する問題