2014-12-08 3 views
0

사용자가 HTML 페이지를 만들 수있는 앱을 구축 중입니다. 사용자가 자신의 페이지를 다운로드 할 때 canvas div 내의 모든 HTML을 가져 와서 페이지 요소가 포함 된 HTML 파일로 저장합니다.HTML 랩 접근 방식

이제 문제는 페이지를 다운로드하기 전에이를 감쌀 수있는 방법을 찾아야한다는 것입니다. 후 다운로드

<div id="page-area"> 
    // PAGE ELEMENTS 
</div> 

결과 전

다운로드

<!DOCTYPE html> 
<html> 
    <head> 
     <title>page</title> 
    <head> 
    <body> 
     // PAGE ELEMENTS 
    </body> 
</html> 

뭐죠 HTML, 머리, 몸 및 기타 기본 HTML 구조 태그 여러 요소를 포장하는 가장 좋은 방법은? jQuery 솔루션 또는 원시 js를 찾고있다.

그래서 예를 들어 나는 이러한 요소

<ul> 
    <li>List</li> 
</ul> 

<div id="tabs"> 
    <span>test</span> 
</tabs> 

의 모든 걸릴 수 있습니다 경우

<!DOCTYPE> 
    <html> 
    <head> 

    </head> 
    <body> 

     <ul> 
      <li>List</li> 
     </ul> 

     <div id="tabs"> 
      <span>test</span> 
     </tabs> 

     </body> 
    </html> 

가 어떻게 jQuery로 그렇게 할 것 같은 기본 HTML 구조 다음 포장?

+2

왜 당신이 체크 아웃하지 않습니다. appendTo http://api.jquery.com/appendto/ – hina10531

+0

가능합니다 [this] (http://stackoverflow.com/questions/19033011/downloading-the-content-of-a-div-as-a)를 찾고 있습니다. -separate-html-file). 위 사용자가 다운로드 한대로 데이터를 추가하십시오. – Abs

답변

1

다음은 코드 참조 용 jsFiddle입니다.

HTML :

<div id="content"> 
    <h1>Hello</h1> 
    ... 
</div> 

JS :

var a = document.body.appendChild(document.createElement("a"));  
a.download = "export.html"; 
html = "<html><head></head><body>" 
html += document.getElementById("content").innerHTML; 
html += "</body></html>" 
a.href = "data:text/html," + html; 
a.innerHTML = "[Download HTML]"; 
+0

훌륭한 작품입니다. 이제는 코드를 들여 쓰고 구성 할 수있는 일종의 플러그인 일 뿐이므로 현재는 이렇게 보입니다. UserDy