他のファイルからHTML要素を読み込むためのサーバー以外のベストな方法

Question

私は、エンドユーザーのローカルファイルシステムに保管されることを目的としたHTMLドキュメントを作成しています。ドキュメントのように、ページを追加/削除/更新するときに、維持しやすいように1つの場所に保存したいナビゲーションリンクのリストなど、

現在のところ、.load("_link.html")メソッドを使用したシンプルなjQueryソリューションがありますが、これはエンドユーザーのコンピュータでより効率的な方法があればより効率的ですPlunker

を使用して純粋なHTMLメソッドを使用しようとしましたが、セカンダリファイルのDOMがプライマリファイルのDOMと干渉します（たとえば、要素の背景にある背景など）。私のPlunkerの "_link.html"は "index.html"からではなく、そのファイルからの背景になります）、さまざまなブラウザで異なる動作をすることができるので、これは良いアプローチだとは思わなかった。

私はGruntJSのようなものを探しています（Linux/OSXとWindowsの両方で実行できるので）私のマシンに最終的なHTMLをビルドしてから、エンドユーザのコンピュータに配信することができます。 HAMLのようなものでソースファイルを維持するために、GruntJSについてまだ分からないので、これが私がやりたいことであるかどうかは分かりません。

このような単純なタスクを実行するために、すべてのページにjQueryライブラリをロードするエンドユーザーのブラウザに依存しない方法がありますか？

Answer 1

あなたが作るためにJSを使用できる場合、それはあなたがこのような何かを行うことができます仕事 - > https://jsfiddle.net/4evpde3w/

function TemplateAdder(){ 
// Adds the template to the DOM 
this.add = function(append_to, template){ 
    parent = document.getElementById(append_to) 
    parent.innerHTML = template; 
} 

// Converts the function to a string pulls the template out of it 
    this.build = function(template){ 
     if(typeof template === 'function'){ 
     return template.toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1]; 
    } 
    } 

    return this; 
} 
// Create a new template Adder 
var template_adder = TemplateAdder(); 

// Have to comment out the temaplate with multi line 
// The clousure returns a function that includes the comments 

var dropdown_template = (function() {/* 

    <div class='dropdown'> 
     <h3> 
      Dropdown Header 
     </h3> 
     <p> 
      I Am the Dropdown Content 
     </p> 
    </div>  

*/}) 

// The build function will convert the returned function into a 
string 
// it then parses the string and pulls out the template between the 
comments 
var template = template_adder.build(dropdown_template); 

// This simple adds our template to the DOM 
template_adder.add('dropdown-wrapper', template); 

Answer 2

私は最終的に私がXMLHttpRequest()を使用したかった解決策を見つけました。

W3 Schools' W3.jsライブラリには、w3-include-htmlという属性のDOM内のすべての要素をチェックし、ターゲットURLの内容を要素にロードする完全な関数w3.includeHTML()があります。

私はそのライブラリ内の他の関数を必要としないので、自分のJSファイルにその関数を抽出することができました。私はそれをチェックして、それはクロム、Firefox、オペラ、サファリ、およびMSエッジで動作します。私が見る唯一の依存関係はXMLHttpRequest自体にありますが、それでも私は近い将来変わることはありません。

コメントに記載されているように、ブラウザによっては、ファイルプロトコルに関するセキュリティ上の懸念から、インポートされたHTMLファイルをローカルファイルシステムからJSを介して処理するための基本Webサーバーが必要です。これらのHTMLファイルのすべてから完全なページを構築することができるもう少し洗練されたWebサーバーが代わりに使用される可能性があるとの議論ができましたが、最終的には、クロスプラットフォームのサポートにとっては "ダム"このクライアントが主に使用するクライアントは、主にFirefox（Webサーバーは必要ありません）を使用します。

私はいくつかのマイナーな変更を行ったが、これsolutionは、本質的にW3.jsから抽出されたコードです：

// Copied from: https://www.w3schools.com/lib/w3.js 

var includeHTML = function() { 
    var target_attr = "include-html"; 
    var z, i, elmnt, file, xhttp; 
    z = document.getElementsByTagName("*"); 
    for (i = 0; i < z.length; i++) { 
    elmnt = z[i]; 
    file = elmnt.getAttribute(target_attr); 
    if (file) { 
     xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      elmnt.innerHTML = this.responseText; 
      elmnt.removeAttribute(target_attr); 
      includeHTML(); 
     } 
     }  
     xhttp.open("GET", file, true); 
     xhttp.send(); 
     return; 
    } 
    } 
}; 
includeHTML();