html-imports를 사용하여 자바 스크립트 비동기 호출로 html 페이지를로드하는 방법

HTML 페이지를로드하려고하면 자신의 데이터이고 Ajax는 html-import을 사용하여 뷰를 렌더링하지만이 문제는 가져 오기가 뷰를 발생시킬 때 발생합니다. 마무리 렌더링, 뷰가 모든 요소를 호출하고 렌더링 완료시기를 알 수있는 방법이있다html-imports를 사용하여 자바 스크립트 비동기 호출로 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>

나는 모든이 때 발광하는대로 onload 이벤트를 사용하도록 제안

출처

2017-09-27 user3853257

일부 코드를 보여 주거나 downvotes 및 닫기를 마주보십시오. 여기에 표시된 노력이 전혀 없습니다. – mplungjan

이 문제를 설명하기위한 코드를 추가했습니다. @mplungjan – user3853257

아무것도 없습니까? https://www.google.com/search?q=web+component+onload – mplungjan

로드를 완료했습니다.

개체가로드 될 때 onload 이벤트가 발생합니다.

이미지, 스크립트 파일, CSS 파일 등 웹 페이지가 완전히로드 된 후 스크립트를 실행하기 위해 요소 내에서 onload가 가장 자주 사용됩니다.

출처

2017-09-27 16:51:57

'onload'는 여전히 HTML을로드하기 때문에 작동하지 않습니다. 그래서 onload는 페이지 DOM을 준비 시키지만 모든 데이터를 DOM 요소와 함께 피드에서 가져온다. page.which는 'iframe'을 사용하여로드하는데 사용한다. 이제는 iframe에서 벗어나려고 노력하고있다. ' – user3853257

html-imports를 사용하여 자바 스크립트 비동기 호출로 html 페이지를로드하는 방법

답변

관련 문제