URLだけが与えられるサーバー側アプリケーションを使用して、レンダリングを終了し、スクリプトの実行を終了したページの現在のスタイル(おそらくインライン)でHTMLを取得する必要があります(Cookie、POST、邪魔なフォームなどの追加情報はありません)など)。
ブラウザ ライブラリを使用して、一時的に実行されているブラウザまたはスタンドアロン ユーティリティへのブリッジ/プロキシは、受け入れられているソリューションです (ただし、選択したブラウザまたはブラウザ ライブラリは、すべての主要なプラットフォームで利用可能である必要があり、OS GUI ビーイングなしで実行できる必要があります)。存在またはインストール済み)。
オプションの要件は、後ですべてのスクリプトを削除することです (このためのスタンドアロンのソリューションが既にあり、ここに追加します。これは、指定された回答がレンダリング中などにスクリプトを削除できる可能性があるためです)。
現在のスタイル (おそらくインライン) と現在の画像 ( data URIを使用) を使用して、現在の HTML ドキュメントの単一の .html ファイルで HTML+CSS のスナップショットを取得するにはどうすればよいですか?
純粋な PHP を使用して実行できる場合、それはプラスになります (私はそれを疑っていますが、興味深いものは何も見つかりませんでした)。
編集: HTTP リソースをロードして URL の HTML を取得する方法は知っていますが、それは私が探しているものではありません ;)
編集 2 入力 HTML の例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="/css/example.css">
<script type="text/javascript" src="/javascript/example.js"></script>
<script type="text/javascript">
window.addEventListener("load",
function(event){
document.title="New title";
document.getElementById("pic_0").style.border="0px";
}
);
</script>
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<p>Hello world!</p>
<p>
<img
alt=""
style="border: 1px"
id="pic_0"
src="http://linuxgazette.net/144/misc/john/helloworld.png"
>
</p>
</body>
</html>
出力例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>New title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
b{font-weight: bold}
</style>
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<p>Hello world!</p>
<p>
<img
alt=""
style="border: 0px"
id="pic_0"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAK3RFWHRDcmVhdGlvbiBUaW1lAFYgMzEgYXVnLiAyMDEyIDE3OjU4OjU1ICswMjAwWMdbPwAAAAd0SU1FB9wIHw8ABeoUyU4AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAEZ0FNQQAAsY8L/GEFAAAABlBMVEX///8AAABVwtN+AAAAXklEQVR42uWQUQ6AMAhD6Q3a+19WqsawwMf+NLEfy3iDlC7idTGQp/YglFAsUMqSwjlQOhN3mIMTHDq70SeEWBbt0EG8POWkDySvmCh/SssvNfwIfb+hFmgjFKPf6gDQBAQ368m09AAAAABJRU5ErkJggg=="
>
</p>
</body>
</html>
<title>
タグがどのように変更され、どのようにborder: 1px
なったか、画像 URL がどのようにデータ URIborder: 0px
に変換されたかに注意してください。
たとえば、これらの変換 (インライン CSS および<title>
タグ) の一部は、Google Chrome インスペクターを使用してドキュメントを検査するときに確認できます。
編集 3 : 外部リソースをページ上のリソース (スタイルと画像) に置き換え、javascript を削除するのは簡単です。難しいのは、javascript を実行した後に CSS スタイルを計算することです。
編集 4たぶん、これは注入された JavaScript を使用して行うことができます (ただし、ブラウザ制御が必要です)。