window对象属性查询器

最新推荐文章于 2023-03-03 10:36:59 发布

w00106702

最新推荐文章于 2023-03-03 10:36:59 发布

阅读量513

点赞数

分类专栏：页面-JS 文章标签： JavaScript window

本文链接：https://blog.csdn.net/w00106702/article/details/51434283

版权

页面-JS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

点击“查询”按钮，展示window对象的属性表格。点击任意属性名称进入查看。如点击属性navigator。
这里写图片描述

代码清单

<meta name="renderer" content="webkit">
<html>
    <head>
        <meta charset="GBK"/>
        <style>         
            #show{
                margin: 10px auto;
                padding: 10px;
                background-color : #ccf;
                height: 550px;
                overflow-y: scroll;
            }

            .prop{
                cursor:pointer;
                text-decoration:underline;

            }

            .prop_table{
                margin: 10px auto;
                border: 1px black solid;
                width: 1100px;
                display: block;         
            }

            .prop_table tr:nth-child(odd)
            {
                background-color: #ff9;
            }

            .prop_table tr:nth-child(even)
            {
                background-color: #fff;
            }

            .prop_table caption{
                font-weight: bold;
                font-size: 24px;
                text-align: left;
            }

            .prop_table th{
                border-right: 1px black solid;
                padding-left: 5px;
                text-align: left;
            }

            .prop_table td{
                padding-left: 5px;
                text-align: left;
            }

            .topBtn{
                float: right;

                right: 50px;
                bottom: 50px;
                position: absolute;

                border: 2px solid black;
                width: 50px;
                height: 50px;
                background-color : #fff;
                text-align: center;
                line-height: 50px;
            }

            .topBtn a{
                display: block;
                width: 100%;
                height: 100%;
            }
            .topBtn:hover{
                background-color : #aaa;
                cursor: pointer;
            }
        </style>

    </head>
    <body>
        <div>
            <label for="dhtml-props">window的属性查询</label>
            <button id="search" onclick="doSearch()">查询</button>
            <button id="back" onclick="back()">返回上一级</button>

        </div>
        <div id="show" > 

        </div>
        <div class="topBtn"><a href="#top">TOP</a></div>
        <script>            
            var prop_stack = [];

            function push(prop){
                if (prop == "")
                    return;

                prop_stack.push(prop);
            }

            function pop(){
                return prop_stack.pop();
            }

            function printPropNames(){
                var s = "";
                for (var p in prop_stack)
                {
                    s+=prop_stack[p] + ".";
                }

                if (s == "")
                {
                    return "window";
                }
                else
                {
                    return "window." + s.substring(0, s.length -1 );
                }

            }

            function seekProp(){
                var len = prop_stack.length;
                var s = window;
                for (var i = 0; i < len ; i++)
                {
                    s = s[prop_stack[i]];
                }
                return s;
            }

            function back(){
                showKv(pop());
            }
            function showKv(){
                var str = "<table id='top' class='prop_table'><caption>" + printPropNames() + "</caption><tbody>";
                var father = seekProp();
                var unsortedPNames = []
                for (var pName in father)
                {
                    if (father == window && (pName == 'prop_stack' || pName == 'push' || pName == 'pop' || pName == 'printPropNames' || pName == 'seekProp' || pName == 'back' || pName == 'showKv' || pName == 'doSearch' || pName == 'clear'))
                    {
                        continue;
                    }

                    //将属性名称存放到一个临时数组
                    unsortedPNames.push(pName);

                }
                //对属性名称排序
                var sortedPNames = unsortedPNames.sort();

                //按排序的顺序输出属性及属性值
                for (var pName in sortedPNames)
                {
                    str += "<tr><th><a class=\"prop\" onclick=\"showKv(push('"+ sortedPNames[pName] + "'))\">" + sortedPNames[pName] + "</a>" + "</th><td>" + father[sortedPNames[pName]] + "</td></tr>";
                }

                str += "</tbody></table>";          

                document.getElementById("show").innerHTML = str;
                scrollTop();
            }

            function scrollTop()
            {
                document.getElementById('top').scrollIntoView();
            }

            function doSearch(){

                clear();
                showKv(push(""));

            };


            function clear(){
                document.getElementById("show").innerHTML = "";
                prop_stack = [];
            }
            document.onkeydown = function(event_e){
                if (window.event)
                {

                    event_e = window.event;
                    var int_keycode = event_e.charCode || event_e.keyCode;

                    //console.log(int_keycode);

                    if (int_keycode == 13){
                        document.getElementById("search").click();
                    }
                    if (int_keycode == 27){
                        clear();
                    }
                }
            }

        </script>
    </body>
</html>

w00106702

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
window对象属性查询器

点击“查询”按钮，展示window对象的属性表格。点击任意属性名称进入查看。如点击属性navigator。代码清单<meta name="renderer" content="webkit"><html> <head> <meta charset="GBK"/> <style> #show{
复制链接

扫一扫

专栏目录