!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
title>頁面內容捕獲器/title>
style>
* { font-size:12px; }
html { padding:0px; margin:0px; border-style:none; border-width:0px; overflow:auto; background-color:buttonface; }
body { padding:0px; margin:0px; border-style:none; border-width:0px; background-color:buttonface; }
li { line-height:24px; height:24px; margin:10px 0px -10px 15px; }
a { color:blue; }
input { border-width:1px; }
#output { width:90%; height:150px; overflow:auto; }
/style>
script>
var win;
function $(s){ return document.getElementById(s); }
window.onload = function(){
    var myHeight = 320;
    window.moveTo(0,0);
    window.resizeTo(screen.availWidth, myHeight);
    //打開一個瀏覽器
    win = new ActiveXObject("InternetExplorer.Application");
    win.left = 0; win.top = myHeight;
    win.width = screen.availWidth; win.height = screen.availHeight - myHeight;
    win.navigate2("about:blank");
    win.visible = true;
    setInterval(function(){ try{ win.document; }catch(e){ window.close(); } }, 1); //窗口關閉后自動退出程序
    //頁面卸載時關閉瀏覽器
    window.onunload = function(){ win.quit(); }
    //自動捕獲
    setInterval(doCapture, 1);
}
function doCapture(){
    try{
        win.document.onclick = capIt;
    }catch(e){}
}
function capIt(){
    var d = win.document, w = d.parentWindow, e = w.event, el = e.srcElement;
    $("currentObj").bound = el;
    $("currentObj").innerHTML = el.tagName;
    showCapture(el);
    e.cancelBubble = true;
    e.returnValue = false;
    return false;
}
function showCapture(el){
    if(!el)return;
    var oldBorderStyle = el.style.borderStyle, oldBorderWidth = el.style.borderWidth, oldBorderColor = el.style.borderColor;
    el.style.border = "2px solid red";
    setTimeout(function(){ try{ el.style.borderStyle = oldBorderStyle; el.style.borderWidth = oldBorderWidth; el.style.borderColor = oldBorderColor; }catch(e){} }, 300);
}
function parentCapture(){
    var el = $("currentObj").bound;
    if(!el || !el.parentNode || el.parentNode.nodeType != 1 )return;
    el = el.parentNode;
    $("currentObj").bound = el;
    $("currentObj").innerHTML = el.tagName;
    showCapture(el);
}
function showCaptureCurrentStyle(){
    var el = $("currentObj").bound;
    if(!el)return;
    var re = [], s = el.currentStyle;
    for(var i in s)if(s[i] != "")re.push(i+":"+s[i]+";");
    $("output").value += "\r\n!--Current Style:\r\n" + re.join(" ") + "\r\n-->\r\n";
}
function showCaptureAllEvent(){
    var el = $("currentObj").bound, re = [];
    if(!el)return;
    for(var i in el)if(String(i).indexOf("on") == 0 el[i])re.push(String(el[i]));
    $("output").value += "\r\n!--All Bound Event:\r\n" + re.join("\r\n") + "\r\n-->\r\n";
}
function doExportHTML(){
    if(!$("currentObj").bound)return;
    $("output").value += "\r\n" + $("currentObj").bound.outerHTML + "\r\n";
}
function doExportInnerCSS(){
    var o = win.document.getElementsByTagName("style");
    for(var i=0; io.length; i++)$("output").value += "\r\nstyle>\r\n" + o[i].innerHTML + "\r\n\/style>\r\n";
}
function doExportFunction(){
    var o = win.document.parentWindow, str = $("funcName").value.split("."), i = -1;
    while(++i str.length (o = o[str[i]]));
    if(!o)return;
    $("output").value += "\r\nscript>\r\n" + o + "\r\n\/script>\r\n";
}
function doTest(){
    var nw = window.open("", "_blank");
    nw.document.open();
    nw.document.write($("output").value);
    nw.document.close();
}
/script>
/head>
body>
ul>
    li>
        目前已捕獲到對象：
        a href="###" onclick="showCapture(this.bound); return false;" id="currentObj">無/a> nbsp;nbsp;nbsp;lt;lt;nbsp;nbsp;nbsp;
        a href="###" onclick="parentCapture(); return false;">獲取其父對象/a>
        nbsp;nbsp;|nbsp;nbsp;
        a href="###" onclick="doExportHTML(); return false;">導出HTML/a>
        nbsp;nbsp;|nbsp;nbsp;
        a href="###" onclick="showCaptureCurrentStyle(); return false;">導出其當前樣式/a>
        nbsp;nbsp;|nbsp;nbsp;
        a href="###" onclick="showCaptureAllEvent(); return false;">導出其綁定的所有事件/a>

    /li>
    li>
        導出內部樣式表：
        a href="###" onclick="doExportInnerCSS(); return false;">導出/a>
    /li>
    li>
        導出JS函數：
        input type="text" value="" onfocus="this.value='';" size="30" id="funcName">
        nbsp;nbsp;|nbsp;nbsp;
        a href="###" onclick="doExportFunction(); return false;">導出/a>
    /li>
    li>
        導出的數據：
        nbsp;nbsp;|nbsp;nbsp;
        a href="###" onclick="doTest(); return false;">測試/a>
        nbsp;nbsp;|nbsp;nbsp;
        a href="###" onclick="$('output').value=''; return false;">清除/a>
        br/>
        textarea id="output">/textarea>
    /li>
/ul>
/body>
/html>