2012-01-09 3 views
5

나는 dojo, javascript 및 HTML 코딩에 아직 조금 익숙하다. Dojo 1.4.2 (향후 업그레이드 예정) 및 javascript를 사용하여 코딩 된 HTML 페이지의 소유권을 상속 받았다. 본질적으로 HTML 페이지는 처음에 사용자에게 표시되는 양식을 포함합니다. 사용자가 양식을 채우고 제출하면 양식이 해답을 기반으로 생성 된 콘텐츠로 바뀝니다.동적 또는 생성 된 HTML 페이지를 어떻게 저장 가능하게 만드십니까?

HTML 파일에 이미 포함 된 다양한 div 요소를 표시하거나 숨기려면 양식의 답변을 사용하면됩니다. 그래서 양식은 숨겨져 있고 다른 div 요소의 일부 하위 집합이 나타납니다.

생성 된 페이지를 사용자가 정적 HTML 페이지로 저장하기를 바랍니다. 따라서 본질적으로 전체 페이지가 아닌 표시된 div 만 파일에 저장하려고합니다. 현재 저장은 사용자가 각보기에서 양식을 다시 제출해야하는 로컬 사본을 저장합니다.

데이터를 서비스 (아마도 JSP)에 전달하여이 문제를 처리하고 브라우저로 다시 전달함으로써이 작업을 수행 할 수 있다고 들었습니다. 그러나 나는 이것에 익숙하지 않고 어떤 예도 찾을 수 없었다. 이 작업을 수행 할 수있는 방법이 있습니까? 그리고 누구에게도 내가 지적 할 수있는 예제 나 문서가 있습니까?

이상적으로는 서버에 남아있는 정적 HTML을 실제로 만들지 않고 생성 된 콘텐츠를 브라우저에 저장하는 저장 버튼을 삽입하고 싶습니다.

미리 감사드립니다.

+0

양식 요소 (입력)에만 내용이 있습니까, 아니면 DIV/SPAN (다른 HTML 요소)도 업데이트하고 있습니까? – vol7ron

+0

초기에는 HTML 상단에 양식 요소가 있지만 제출 버튼을 클릭하면됩니다. 표시된 "생성 된"컨텐츠는 스타일을 업데이트함으로써 드러난 HTML 페이지 하단의 DIV/SPAN 등입니다. – piperp

답변

1

URL 매개 변수 (즉, 구문 분석 된 쿼리 문자열의 내용)에 따라 페이지를 변경하는 메커니즘을 도입 할 수 있습니다.

e.e. 조회 부를 포함하는 URL을 지정 (예를 들면 http://your.site.com/path/to/page?p1=true & P2 = TRUE)를 ElementP1 또는 보여줄 것이다 P2에 매핑; 다른 사람들은 그렇지 않습니다.

+0

내 경험과 시간을 감안할 때이 길로 향할 가능성은 적지 만 입력에 대해 감사드립니다. – piperp

+0

추가 도구를 사용할 때의 제한 사항으로 인해이 경로가 종료되었습니다. 또한 HTML 페이지를 JSP로 변환하여 작업을 더 쉽게 만들었습니다. 이 조합을 통해 정적 사본을 저장할 수있었습니다. – piperp

+0

반가워요! 잘 했어. – FK82

1

플래시 플러그인을 사용하여 동적으로 생성 된 데이터를 다운로드 할 수 있습니다. 트릭을 수행하는 작은 스크립트 here을 작성했습니다.

여기에 스크립트의 an example이 있습니다.

dist 다른 곳의 자바 스크립트 파일이 있으면 어디든 세 가지를 버리십시오. 머리에 swfobject.jsbhd.js 개의 스크립트를 포함 시키십시오. <div id="dl_button"></div> 페이지로드

,이 같은 스크립트를 실행합니다 :

var dlBtn = new BHD.Button({ 
    // id of the element to replace with this button (required) 
    id:'dl_button', 
    // button image 
    sprite:'buttons.png' 
},function(){ 
    // set default filename 
    dlBtn.setFile('untitled.html'); 
    // set file contents 
    dlBtn.setData('<html>' + document.documentElement.innerHTML + '</html>'); 
}); 

귀하의 "buttons.png는"이런 일 (3 주 누워있는 스프라이트를 볼 필요가 몸에서이 같은 일부 HTML을 포함 밖으로 수직) : 모든 것이 잘 이루어졌다

button sprite

경우, 버튼을 클릭하면 페이지의 현재 상태의 사본을 다운로드하라는 메시지를 표시합니다.jQuery를 같은 것을 사용

+0

감사합니다. 나는 이번 주에 저를 위해 일하는 해결책을 표시하기 전에 살펴보고 이것을 시도 할 것입니다. – piperp

1

은, 모든 렌더링 된 HTML 콘텐츠를 얻을 간단합니다

문제는 당신으로 인해 브라우저 보안, 자바 스크립트에서 그렇게 쉽게 할 수없는 페이지를 저장하려는 존재
$(document).ready(function(){ 
    var rendered = $('html').html(); // store this in some variable 
}); 

제한 사항으로 인해 브라우저가 로컬 파일 시스템에 액세스하지 못합니다.

ActiveX 또는 execCommand (http://4umi.com/web/javascript/filewrite.php)를 사용하는 경우 Internet Explorer가 예외 일 수 있습니다. 그렇지 않으면 GGG가 지적한 것처럼 일부 타사 도구/플러그인 (예 : Flash)을 사용해야합니다.

+0

감사합니다. 따라서 올바르게 이해하면 렌더링 된 컨텐츠를 얻을 수 있지만 문제는 브라우저에 따라 로컬로 저장할 수 있도록 허용 할 수 있으며 일부 추가 도구/플러그인을 사용하여 해결할 수있을 가능성이 높습니다. – piperp

+0

정확하게. 크로스 브라우저를 사용하려면 보안상의 이유로 추가 플러그인 (예 : 플래시)을 사용해야합니다. Google 목록에서 사이트를 탐색하고 하드 드라이브에 [/ 읽기]를 쓰는 기능이 있다고 상상해보십시오. 웹 페이지를 보는 것 이외의 일을하지 않고도 기밀 정보를 취하거나 바이러스를 쉽게 전송할 수 있습니다. 그것은 가장 불안한 것입니다. – vol7ron

3

어쨌든 bookmarklet은 어떻습니까? 그런 다음 현재 DOM의 HTML 표현을 액세스하여 작동하고,

javascript:document.location='data:text/html,'+document.all[0].innerHTML; 

Data URI scheme를 사용하여 HTML 마크 업에서으로 구축 새 페이지로 리디렉션합니다.

새 페이지는 브라우저의 일반 저장 메뉴 항목을 사용하여 쉽게 저장할 수 있습니다. 상대 URL은이 변환에서 유지되지 않으므로 저장된 페이지에 스타일 시트/스크립트/이미지 참조가 손실 될 수 있습니다.

관련 문제