Dynamically insert new function to current html page - NEW SCENARIO

I have introduced two different way to insert new function in current html page dynamically. But there is a very tricky situation here which I think I should explain more. Let us say there are three html pages: main.htm, p1.htm and p2.htm. main.htm is actually the container of p1.htm and p2.htm and there is a nav control switch can help user jump between p1.htm and p2.htm pages. Now I want to add a new js function into the onunload event of main.htm page, which make sure a particular function will be invoke when user close the main.htm page no matter he/she is viewing p1.htm or p2.htm. To do so add the js code below to p1.htm (we suggest the p1.htm will be the first page shown in main.htm).

window.top.eval("window.onunload=function(){alert('new func...')};");

If you use window.eval instead of window.top.eval to create the new function, then when you jump to p2.htm and close the window the main.htm can't find the proper onunload function to call. I reckon the reason is the function point is only relying on the window object which you called the eval function from.