5

質問の短縮版

動的(ajax/javascript) Webページのすべてのスタイルが適用/インライン化されたランタイムhtml(domの現在の状態)をキャプチャする方法はありますか?

ロングバージョン

私がやりたいことは、dom の現在の状態を単一の html ページとして保存し、すべてのスタイルを<style>タグでラップするか、スタイルをインライン化することです。

同様に、必要なのはコアダンプ ファイル (アプリケーションの現在の状態を示す) に似たものですが、この場合は、表示/デバッグするためにブラウザにロードできる (html) ファイルです。

ページに JavaScript がない場合、このタスクは非常に簡単です。

  • File->Save Page As -> html completeWebブラウザから行う
  • またはhttp://www.httrack.comや curlなどのツールを使用して、ページとすべてのリンクされた画像をダウンロードします

以下に、プログラムで同じことを行うために何ができるかを高レベルでリストします (ただし、完全な解決策ではありません)。

  • html コンテンツを取得する
  • onclickのように、すべてのタグとonXXX属性をそれぞれから削除します
  • *.css コンテンツを取得
  • css スタイルを内部に埋め込む<style>
  • すべての画像パスを相対パスに変更
  • すべての画像を保存

ただし、javascript を使用してページを作成する場合、またはページの状態がロード/クリック時に変更され、一部の要素が非表示になり、ページのレイアウトが変更される場合、上記の方法は使用できませんでした。

では、(動的な JavaScript が有効になっている) Web ページの現在の状態を保存するにはどうすればよいでしょうか?

そのような方法 / ツール / プラグインが存在する場合、インターネットまたは Web アプリケーションにアクセスできない人とページを電子メールで共有したり共有したりすると便利です。

4

2 に答える 2

0

では、デスクトップでやりたいと思いますか？次に、できれば phantomjs などのヘッドレス ブラウザーを使用し、クロスサイト スクリプティングを無効にします。ターゲット URL を iframe にロードし、その dom を取得してファイルに保存する JavaScript を記述します。インライン化する方法がわからないため、すべての CSS を手動で保存する必要があります。

于 2012-01-17T22:28:45.167 に答える
0

DOM の現在の状態を取得する方法について。

jQuery の .html() を利用して、現在の DOM を取得できます。

var DOMState = $('html').html();

jquery を挿入するブックマークレットを作成できます (例については、 http://blog.reybango.com/2010/09/02/how-to-easily-inject-jquery-into-any-web-page/を参照)。次に、html をキャプチャします。

于 2012-01-17T22:34:54.217 に答える