ローカルHTMLをDivにロードする（Chrome拡張機能）

Question

フレームワークを使用していないため、単一のHTMLファイルにレイアウトのスケルトンが保持され、他のHTMLスニペットがレイアウト。コードはすべてメインの拡張フォルダ/ popup /内の同じディレクトリにあります

ローカルに保存されたhtmlスニペットをdiv要素に読み込むための非常に単純な関数を作成します。ここに私の最初の試みである：

function loadView(viewName,destination){ 
    var URL = "/popup/"+viewName; 
    var client = new XMLHttpRequest(); 
    client.open('GET', URL, false); 
    client.onreadystatechange = function() { 
     document.getElementById(destination).innerHTML = client.responseText; 
    } 
    client.send(); 
} 

// Example of a call 

loadView('contact.html','widgetBox'); 

それが偽asynchにAJAXの設定に依存しているので、明らかにこれはひどいです。しかし、この解決策の下では、スクリプト内の次のコード行が新しくロードされたコンテンツを操作しようとする可能性があるため、これが必要です。

ajaxに依存しない同様の結果に達する方法は何でしょうか？ （あるいは、少なくとも、非同期誤使用の必要性を解決することになる）

注：

• 私は基本的に、この正確な問題のためのフレームワークがあることを知っています。私はフレームワークなしでやることを学ぶのが好きです。私はフレームワークの使用には挑戦していない、私はこの問題のアプローチに興味がない。関連して、私はjqueryの使用を避けたいと思います（そして、これはクロム拡張ですので、きれいなJSで開発するのは特に苦しいことではありません）。
• contact.htmlのコンテンツはhtmlです.HTMLの文字列です（つまり、ロードするコンテンツ以外にヘッダーやコンテンツはありません）。私は個別の.htmlファイル以外にも別の大会に出席していますが、私は様々なページチャンクを整理しておくのが簡単で、HTML形式のもので簡単に読むことができます。

Answer 1

loadView関数は、コールバックを3番目のパラメータとして受け入れる必要があります。それから、Ajax呼び出しが完了したら呼び出します。これにより、非同期要求を使用できます。

function loadView(viewName, destination, callback){ 
    var URL = "/popup/"+viewName; 
    var client = new XMLHttpRequest(); 
    client.open('GET', URL); 
    client.onreadystatechange = function() { 
     if (client.readyState < 4) return; // Wait until the request completes 
     document.getElementById(destination).innerHTML = client.responseText; 
     callback(); 
    } 
    client.send(); 
} 

// Example of a call 

loadView('contact.html', 'widgetBox', function() { 
    // Do whatever comes next 
});