Document Mutation

swmr · 07-03-2003, 01:22 AM

Is there is some method for detecting whether any changes have occured within a document's innerHTML?

The only mention of this I've seen referred to "DOMSubtreeModified", but with no explanation of how to use it.

My purpose is to display a confirm message (for overwriting the document) if any styles, values, or content have been modified (or just close the document without a message, if nothing has changed).

Here is a crude/limited example of what I'm trying to accomplish:

Code:

<HTML XMLNS:HTA><HEAD><TITLE>docOverwite</TITLE><HTA:APPLICATION></HTA:APPLICATION>
<SCRIPT type=text/JScript>
window.onbeforeunload=function determine(){
if (Box.checked==true){return ask()}}
function ask(){
Box.checked=false;if (confirm("Overwrite this document?")){
return save()}else opener=self;opener.close()}
function save(){
var thisLocation=document.URL.replace(/^(file:\/\/)/,"").replace(/(\\)/g,"\\\\").replace(/(%20)/g," ");
var forWriting=2;
var dataFile=thisLocation;
var fso=new ActiveXObject("Scripting.FileSystemObject");
ts=fso.OpenTextFile(dataFile,forWriting,true);
ts.Write(document.documentElement.outerHTML);
ts.Close();
}
</SCRIPT>
</HEAD>
<BODY bgColor=buttonface>
<TEXTAREA style="WIDTH: 100%; HEIGHT: 200px" onpropertychange=Box.checked=true></TEXTAREA>
<INPUT id=Box disabled type=checkbox></BODY></HTML>

jkd · 07-03-2003, 01:54 AM

document.addEventListener("DOMSubtreeModified", function(event) {
alert("Document modified!");
}, false);

If it works anywhere, it would be in Mozilla. No other browser supports mutation events at all.

swmr · 07-03-2003, 02:24 AM

Alright, thank you for the info.

Would there happen to be other ways of detecting innerHTML changes--without using specific event handlers?

Graeme Hackston · 07-03-2003, 04:01 AM

Reading innerHTML in IE is a not acurate so I don't think anything like that would work. This is just an idea.

Save the page unonload regardless of changes as a temp file then

Code:

var fs = fso.OpenTextFile(temp_file)
var str1 = fs.ReadAll()

fs = fso.OpenTextFile(original_file)
var str2 = fs.ReadAll()

if (str1 != str2) {
save()
}
var remove_file = fso.GetFile(temp_file)
remove_file.Delete()

If you save the file, write str1 over the original file. I just typed this here so check it first. Especially with delete in there

<edit>
See what I mean by checking it, I mis-spelled "typed"

</edit>

Graeme Hackston · 07-03-2003, 04:14 AM

Also, a tip while you're checking, write the page strings to files and check them there. Alerting whole pages is no fun.

Graeme Hackston · 07-03-2003, 05:03 AM

Just thinking, I've never tried writing a page using outerHTML. I write them like this:

function Write_Page() {
page = '<html>\n'
page += '...'
if (some_change) {
page += change +'\n'
}
page += '...'
page += '</html>'
ts.Write(page);
ts.Close();
}

That type of thing. I've noticed that innerHTML is parsed. Does this work for you using outerHTML?

swmr · 07-04-2003, 09:13 AM

Quote:

Save the page unonload regardless of changes as a temp file then...

What a great idea!

Thanks a lot for suggesting it...

I managed to get that working & then thought to try the same sort of thing with a Modeless Dialog, which also does the trick:

Code:

<HTML XMLNS:HTA><HEAD><TITLE>Detect Edit & Overwrite HTA</TITLE>
<SCRIPT type=text/JScript>
var smd = showModelessDialog("javascript:var dSource='<html><textarea id=stored></textarea></html>';document.write(dSource)","","dialogWidth:0px;dialogHeight:0px"); 
window.onload=function OnloadValue(){ 
smd.stored.value=document.documentElement.outerHTML;
window.focus()
} 
window.onbeforeunload=function UnloadValue(){
if (document.documentElement.outerHTML != smd.stored.value){return ask()}else alert('nothing changed...')}
function ask(){if (confirm("Overwrite this document?")){return save()}}
function save(){
var thisLocation = document.URL.replace(/^(file:\/\/)/,"").replace(/(\\)/g,"\\\\").replace(/(%20)/g," ");
var dataFile = thisLocation;
var forWriting = 2;
var fso = new ActiveXObject("Scripting.FileSystemObject");
var ts = fso.OpenTextFile(dataFile,forWriting,true);
ts.Write(document.documentElement.outerHTML);
ts.Close()}
</SCRIPT>
</HEAD>
<BODY><TEXTAREA style="WIDTH: 100%; HEIGHT: 200px"></TEXTAREA></BODY></HTML>

Quote:

That type of thing. I've noticed that innerHTML is parsed. Does this work for you using outerHTML?

I don't know off-hand how to put that together, but I'll let you know what happens if I figure it out... thanks again.

swmr · 07-04-2003, 12:37 PM

Oh, I probably should have written the dialog this way, instead:

var smd=showModelessDialog("nonExistent.html","","dialogWidth:0px;dialogHeight:0px");
window.onload = function OnloadValue(){
var dSource = "<html><textarea id=stored></textarea></html>";
smd.document.open();
smd.document.write(dSource);
smd.document.close();
smd.stored.value=document.documentElement.outerHTML;
window.focus()}