コンテンツが動的に変化する Web ページを保存する必要があります。たとえば、ユーザーがカスタム関数を追加すると、カスタム関数のドロップダウン リストに追加されます。PHP と AJAX を使用して、「新しく」更新されたページを保存したいと思います。「本体」の div でラップして、すべての要素の innerHTML を取得しようとしました。アラート ボックスで結果を表示すると、すべてのデータがキャプチャされているように見えます。しかし、POST AJAX メソッドを使用して savedata.php ファイルにデータを投稿すると、データは保存されません。データの最初の数行のみが保存されます。
選択ボックスの新しいオプションとテキストエリアの内容も保存されません。ただし、個別に textarea を保存し、innerHTML の代わりに .value を使用してボックス データを選択しようとすると、機能します。
簡単に言えば、私の質問は、 documentGetById("main-body").innerHTML を使用してページのすべてのコンテンツを取得すると、アラート ボックスにすべてのデータが表示されるにもかかわらず、なぜ innerHTML データが保存されないのかということです。ここにいくつかのコードがあります
Javascript と AJAX コード
function savehtml()
{
//Make ajax call after setting up variables
var saveme=document.getElementById('txtArea').innerHTML
var filename = document.getElementById('nameoff').value
var parameters="saveme="+saveme+"&filename="+filename
ajaxr('savedata.php', "result", parameters)
}
function ajaxRequest() {
var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]
if (window.ActiveXObject) {
for (var i=0; i<activexmodes.length; i++) {
try {
return new ActiveXObject(activexmodes[i])
}
catch(e) {
//suppress error
}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
return new XMLHttpRequest()
else
return false
}
function ajaxr(phpfilename, idofinnerhtml, parameters)
{
var mygetrequest=new ajaxRequest()
mygetrequest.onreadystatechange=function() {
if (mygetrequest.readyState==4) {
if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1) {
alert(parameters)
document.getElementById(idofinnerhtml).innerHTML="Result: "+mygetrequest.responseText
/*document.getElementById("catbody").value="Result : "+mygetrequest.responseText*/
}
else {
document.getElementById(idofinnerhtml).innerHTML="Result: Failed "
}
}
}
mygetrequest.open("POST", phpfilename, true)
mygetrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
mygetrequest.send(parameters)
}
HTML コード
<body>
<div id="main-body">
<table>
<tr>
<td>
<textarea id="txtArea" name="txtArea" rows="10" cols="100"><?
?></textarea><br><br>
</td>
<h2>Quick tools</h2>
<button onclick="addsigns();">Add a sign</button><br>
<input type="radio" id="andsign" name="whichsign" value="&&">&&
<input type="radio" id="orsign" name="whichsign" value="||">||
<input type="radio" id="notsign" name="whichsign" value="!">!
....
<td>
<h2>Save file</h2>
<input id="nameoff" type="text">
<button onclick="savehtml();">Save html</button><br>
</td>
Phpコード
$data=$_POST['saveme'];
$filename=$_POST['filename'];
echo $data;
$handle = fopen($filename, 'w+');
flock($handle, LOCK_EX);
fwrite($handle, $data);
flock($handle, LOCK_EX);
fclose($handle);
問題が解決しました:
私は問題を理解したようだと思います。この問題は、2 つのブラウザーを同時に使用したことが原因で発生しました。どうやら Internet Explorer 8 では、innerHTML でもテキストエリアの値が表示されますが、Firefox では表示されません。したがって、Internet Explorer を使用してデータを保存すると、innerHTML を呼び出したときに値が保存されます。firefox の場合、innerHTML には含まれないため、textarea の値を取得するには .value を使用する必要があります。私は両方のブラウザーでテストしていたので、一方のアラートの innerHTML コードを見て、もう一方のブラウザーでも同じであると考えて、自分のファイルを他のブラウザーのコードで上書きしたに違いありません。とにかく、貢献してくれた人々の助けに感謝します。私と同じような問題を抱えている人の助けになることを願っています。