html-importsを使用してjavascript非同期呼び出しでhtmlページを読み込む方法

HTMLページを読み込もうとしています。自分自身のデータであり、ajaxがhtml-importを使用してビューをレンダリングするよう呼びますが、仕上げレンダリングは、ビューはそのすべての要素html-importsを使用してjavascript非同期呼び出しでhtmlページを読み込む方法

(function(){ 
 
\t function createLauncherPanel() { 
 
     var div = document.createElement("div"); 
 
     div.setAttribute("class", "launcher-panel"); 
 
     div.classList.add("hidden"); 
 
     div.appendChild(createLauncherLink(div)); 
 

 
     document.getElementsByTagName("body")[0].appendChild(div); 
 

 
     return div; 
 
    } 
 

 
    function createLauncherLink(container) { 
 
     var link = document.createElement("link"); 
 

 
     link.setAttribute("rel", "import"); 
 
     link.setAttribute("href", "path-to-htmlpage-with-data-load -asynchronously-with-json-feed-and-view-to-render"); 
 

 
     
 
     console.log('container',container); 
 
     link.addEventListener('load', function(e) { 
 
    // all imports loaded 
 
     \t console.log(e); 
 
     \t console.log('link',link); 
 
     \t console.log(link.import); 
 
      // #ele is the element i need to get from the imported page - but sence this element is not rendered yet because of the lateinse of rendering and network calls , this will return null 
 
    container.appendChild(link.import.querySelector('#ele')); 
 
}); 
 
     
 

 
     return link; 
 
    } 
 
    
 

 
    createLauncherPanel(); 
 
})();

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    \t <meta charset="utf-8"/> 
 
    <title>title</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.13/webcomponents-lite.js" type="text/javascript"></script> 
 
     
 
    </head> 
 
    <body> 
 
    <h1>Hello, worssld</h1> 
 
    <div id="ff"></div> 
 
<script src="sc.js" type="text/javascript"></script> 
 
    
 
    </body> 
 
</html>

出典

2017-09-27 user3853257

いくつかのコードを表示するか、下線と終わりに直面しますか？ここには何も表示されていません。 – mplungjan

に問題を説明するコードが追加されました。@mplungjan – user3853257

何もありません。 https://www.google.com/search?q=web+component+onload – mplungjan

を呼び出し、レンダリング終了したときに、私はすべてがある場合、それが発動するようonloadイベントを使用することができことをお勧め知る方法はありさロードを完了しました。

onloadイベントは、オブジェクトがロードされたときに発生します。

イメージ、スクリプトファイル、CSSファイルなど、すべてのコンテンツが完全に読み込まれると、スクリプトを実行するためにonloadが要素内で最もよく使用されます。

出典

2017-09-27 16:51:57

' onload'はまだ動作していませんでした。なぜなら、私がロードしているのはHTMLだからです。だから、onloadはページドミノを起動しますが、まだすべてのデータは、iframeを使ってロードするために使用しているdom要素、page.whichを持つフィードからレンダリングされません。 ' – user3853257

html-importsを使用してjavascript非同期呼び出しでhtmlページを読み込む方法

答えて

関連する問題