どのように動的または生成されたHTMLページを保存可能にするには？

私はまだdojo、javascript、およびHTMLコーディングを少し新しくしています。私はdojo 1.4.2（将来的にアップグレードされる予定です）とjavascriptを使ってコード化されたHTMLページの所有権を継承しました。基本的にHTMLページには、最初にユーザーに表示されるフォームが含まれています。ユーザーがフォームに記入して提出すると、フォームはその回答に基づいて生成されたコンテンツに置き換えられます。どのように動的または生成されたHTMLページを保存可能にするには？

これは、フォームの回答を使用して、HTMLファイルに既に含まれているさまざまなdiv要素を表示または非表示にすることによって行われます。フォームは隠され、他のdiv要素のサブセットが公開されます。

この生成されたページを静的なHTMLページとしてユーザーが保存できるようにしたいと思います。したがって、本質的には、表示されたdivのみをページ全体ではなくファイルに保存したいと考えています。現在、保存するとローカルコピーが保存され、ユーザーは各ビューでフォームを再送信する必要があります。

これは、これを処理してブラウザに戻すサービス（おそらくJSP）にデータを渡すことで可能だと言われました。しかし、私はこれに精通しておらず、例を見つけることができませんでした。これを行う方法はありますか？誰かが私が指摘できる例や文書を持っていますか？

理想的には、サーバーに残る静的HTMLを実際に作成せずに、ブラウザに表示されている生成コンテンツを保存する保存ボタンを挿入したいと思います。

ありがとうございます。

出典

2012-01-09 piperp

コンテンツはフォーム要素（入力）のみであるか、DIV/SPAN（他のHTML要素）も更新していますか？ – vol7ron

最初にフォーム要素がHTMLの上部にありますが、送信ボタンをクリックするとフォーム要素が表示されます。表示される「生成された」コンテンツは、スタイルを更新することによって明らかにされるHTMLページの下部にあるDIV/SPANなどです。 – piperp

URLパラメータ（つまり、解析されたクエリ文字列の内容）に従ってページを変更するメカニズムを導入できます。

I.e.クエリ部分（例えばhttp://your.site.com/path/to/page?p1=true & P2 =真）P1を示すであろうまたはP2にマッピングElement Sを含むURLを与えられました。他の人はそうしないだろう。

出典

2012-01-09 18:39:28 FK82

私の経験とタイムフレームを考えれば、私はこの道を歩く可能性は低いですが、入力に感謝します。 – piperp

追加のツールを使用する際の制限により、このパスを終了しました。また、HTMLページをJSPに変換して作業を簡単にしました。この組み合わせにより、私たちは静的なコピーを保存することができました。 – piperp

よろしくお願いします！よくやった。 – FK82

フラッシュプラグインを使用して、動的に作成されたデータをダウンロードすることができます。私はトリックを行う小さなスクリプトhereを書きました。

ここにスクリプトのan exampleがあります。

他のjavascriptファイルがある場合は、distの3つの項目を削除してください。頭にはswfobject.jsとbhd.jsのスクリプトが含まれています。

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つの状態でこのような何か（スプライトを見ている必要があります。このようなスクリプトを実行し、ページロードで<div id="dl_button"></div>

：体内でこのようないくつかのHTMLを含めますアウト垂直）：すべてが正しく行われた

button sprite

場合は、ボタンをクリックすると、ページの現在の状態のコピーをダウンロードするようにユーザに促す必要があります。jQueryのようなものを使用して

出典

2012-01-09 18:50:46

ありがとうございます。今週はこれを試してみることにします。 – piperp

が、それはすべてのレンダリングされたHTMLコンテンツを取得するために簡単です：

$(document).ready(function(){ 
    var rendered = $('html').html(); // store this in some variable 
});

問題は、ブラウザのセキュリティのためにJavaScriptでそう簡単に行うことができないページを、保存することが存在しますブラウザがローカルファイルシステムにアクセスするのを妨げます。

ActiveXまたはexecCommand（http://4umi.com/web/javascript/filewrite.php）を使用している場合は、Internet Explorerが例外になることがあります。それ以外の場合は、GGGが指摘しているように、サードパーティのツール/プラグイン（Flashなど）を使用する必要があります。

出典

2012-01-09 20:05:14 vol7ron

ありがとうございます。だから私が正しく理解すれば、レンダリングされたコンテンツを手に入れることができますが、問題はユーザーがブラウザに応じてローカルに保存できるようになります。 – piperp

正確に。クロスブラウザになるためには、セキュリティ上の理由から、追加のプラグイン（Flashなど）を使用する必要があります。あなたがGoogleのリストからサイトを閲覧し、あなたのハードドライブに[/から]書き込むことができたとします。 Webページを表示する以外に、機密情報を取得したり、ウイルスを簡単に送信したりする可能性があります。これは今までで最も安全ではないでしょう。 – vol7ron

どうすればbookmarkletのようになりますか？

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

それは、現在のDOMのHTML表現をアクセスすることによって動作し、その後Data URI schemeを使用してHTMLマークアップから構築されています新しいページにリダイレクトします。

新しいページは、ブラウザの通常の保存メニュー項目を使用して簡単に保存できます。相対URLはこの変換に耐えないので、保存されたページはスタイルシート/スクリプト/イメージ参照を失う可能性があることに注意してください。

出典

2012-04-25 19:15:36 lukecyca

どのように動的または生成されたHTMLページを保存可能にするには？

答えて

関連する問題