• BOM浏览器对象


    BOM 浏览器对象
    
    一、浏览器本身就自己有一些对象,不用创建就可以使用
    
    window(当前浏览器窗体)
        属性:
            status
            opener
            closed
            parent
            top
            
        方法:
            alert();
            confirm();
            setInterval();
            clearInterval();
            
            setTimeout();//只执行一次
            clearTimeOut();
            
            open();//打开一个新窗体 a链接也可以跳转打开新窗体,两者的区别是:window的open打开的窗体是有联系的,a链接的是没有任何关系的
            closed 返回指定窗体是否是关闭的
            
        document
        frames
        location
        history
        screen
        ...
        
        [window.]成员
        document.write();
        
        本身window
        open可以弹出子窗体
        frams多个窗体
    <html>
        <head>
        
        </head>
        
        <body>
            <a href="www.baiyu.com" onclick="return confirm('你确定要删除吗?')">删除</a>
        </body>
    </html>
    confirm
    <html>
        <!-- 砰砰砰 游戏-->
        <head>
        
        </head>
        
        <body onkeydown="js()">
            <div id="one" style="position:absolute; top:0px; left:0px; 100px; height:80px; background:red;">
            </div>
            
            <script>
                var sx=5;
                var sy=5;
                
                var top_1=0;
                var left_1=0;
                var height_1=document.body.clientHeight;
                var width_1=document.body.clientWidth;
                var one=document.getElementById("one");
                function sa(){
                    if(top_1>=(height_1-one.offsetHeight) || top_1<0){
                        sy=-1*sy;
                    }
                    if(left_1>=(width_1-one.offsetWidth) || left_1<0){
                        sx=-1*sx;
                    }
                    top_1+=sy;
                    left_1+=sx;
                    one.style.top=top_1;
                    one.style.left=left_1;
                }
                function js(){
                    sx=sx*2;
                    sy=sy*2;
                }
                var dt=setInterval("sa()",50);
                one.onmouseover=function(){
                    clearInterval(dt);
                }
                one.onmouseout=function(){
                    dt=setInterval("sa()",50);
                }
            </script>
        </body>
    </html>
    碰撞
    <html>
    
        <head>
        
        </head>
        <body onunload="clo()">
            <!--<a href="01.html" target="_blank">新</a>-->
            <script>
                var subw=window.open("04.html","_blank","top=300,left=300,width=200,height=200");
                /*
                设置子窗口属性使用逗号隔开
                父窗口操作子窗口使用的是子窗口名
                */
                function show(obj){
                    subw.document.body.bgColor=obj.value;
                }
                function ss(){
                    window.document.title="guodaxia";
                }
                
                //closed返回指定窗体是否是关闭的
                function clo(){
                    if(!subw.closed){
                        subw.close();
                    }
                }
            </script>
            
            <input type="button" onclick="show(this)" value="red"><br/>
            <input type="button" onclick="show(this)" value="green"><br/>
            <input type="button" onclick="show(this)" value="yellow"><br/>
            <input type="button" onclick="show(this)" value="blue"><br/>
            <input type="button" onclick="show(this)" value="#ff00ff"><br/>
            
            
        </body>
    
    </html>
    <html>
    
        <head>
        
        </head>
        <body>
            <script>
                /*
                子窗口中有一个opener属性,代表父窗口对象
                */
                function show(obj){
                    opener.document.body.bgColor=obj.value;
                }
                opener.ss();//子窗口调用父窗口方法
                
            </script>
            
            <input type="button" onclick="show(this)" value="red"><br/>
            <input type="button" onclick="show(this)" value="green"><br/>
            <input type="button" onclick="show(this)" value="yellow"><br/>
            <input type="button" onclick="show(this)" value="blue"><br/>
            <input type="button" onclick="show(this)" value="#ff00ff"><br/>
            
            
        </body>
    
    </html>
    open父子窗口
    <html>
    
        <head>
            <style type="text/css">
                frame{
                    border:1px solid red;
                }
            </style>
             
        </head>
        
        <frameset rows="100,*">
            <frame name="top" />
            <frameset cols="150,*">
                <frame name="menu" src="menu.html"/>
                <frame name="main" />
            </frameset>
            
        </frameset>
    </html>
    <html>
        <head>
        
        </head>
        
        <body>
            <input type="button" onclick="document.body.bgColor='yellow'" value="改自己的"/>
            <input type="button" onclick="window.parent.parent.frames[0].document.body.bgColor='red'" value="改上面的"/>
            <!--
            <input type="button" onclick="window.parent.parent.frames[2].document.body.bgColor='blue'" value="改右边的"/>
            -->
            <input type="button" onclick="window.top.frames['main'].document.body.bgColor='blue'" value="改右边的"/>
        </body>
        <script>
            /*
                想要改变其他窗口就需要获取其他窗口的window对象,如何获取其他窗口的window对象呢?
                我们前面在使用父子窗口的时候,子窗口是可以获取得到父窗口的,使用的是opener,父窗口获取子窗口使用的是window.子窗口名
                使用frame,其实有点类型于子父窗口
                
                注意在frame中获取父窗口使用的是parent属性,一般都是获取到顶层窗口再寻找指定窗口设置。获取到指定窗口后窗口下标是0开始,排序是从左往右,从上往下。如果只是获取上一个窗口操作可能发生错误。
                
                一直找最外层窗口有点麻烦,我们可以使用top属性获取最外层的窗口对象,然后使用它的frames属性获取frames对象数组
            */
        </script>
        
    </html>
    framms控制
    windows对象中的常用对象属性
        document
        location
            html跳转:
                <meta http-equiv="refresh" content="3">三秒刷新一次
                <meta http-equiv="refresh" content="3;url="http://www.baidu.com">三秒刷新跳转到指定页面
                
            js跳转
            window.navigate(url);//重定向
            location.href='url';
            location.replace('url);
        history
            back()
            go(i) i表示向上返回的步数,i是负数
        screen
        
        clipboardData剪切板对象
            setData(数据类型字符串,数据对象);
        
    <html>
        <head>
            <!--<meta http-equiv="refresh" content="3;02.html">-->
            <meta http-equiv="refresh" content="3;url=02.html">
        </head>
        
        <body>
        
        </body>
        
        <script>
            document.write(new Date());
        </script>
    </html>
    <html>
        <head>
        
        </head>
        
        <body>
            12131
        </body>
        <script>
            setTimeout(function(){
                //window.navigate("01.html");火符IE不兼容
                //window.location.href="01.html";
                //location="01.html";//这样简写也可以
                location.replace("01.html");//这样会替换掉原来的链接,无法后退
                location.reload();//重新加载
            },3000);
        </script>
    </html>
    刷新与跳转
    <html>
        <head></head>
        <body>
            <a href="two.html">向下</a>
        </body>
        
    </html>
    <html>
        <head></head>
        <body>
            <a href="javascript:history.go(-1);">向上一步</a>
            <a href="javascript:history.go(-2);">向上两步</a>
        </body>
        
    </html>
    <html>
        <head></head>
        <body>
            <a href="three.html">向下</a>
            <a href="javascript:history.back()">向上一步</a>
        </body>
        
    </html>
    history向上与向下
    <html>
        <head></head>
        <body>
            
        </body>
        <script>
            with(document){
                write("您的屏幕显示设定值如下:<p>");
                write("屏幕的实际高度为"+screen.availHeight+"<br/>");
                write("屏幕的实际宽度为"+screen.availWidth+"<br/>");
                write("屏幕的色盘深度为"+screen.colorDepth+"<br/>");
                write("屏幕区域的高度为"+screen.height+"<br/>");
                write("屏幕区域的宽度为"+screen.width);
            }
        </script>
        
    </html>
    屏幕对象
    <html>
        <head>
        <!-- 复制到粘贴板 -->
        </head>
        
        <body>
        <!--都没成功
            <a href="javascript:window.external.AddFavorite('07.html','07学习')">收藏</a>
            <a href="javascript:this.setHomePage('07.html');">设为首页</a>
            <div id="one">
        -->
            aaaaaaaaaaaaaaaaaaaaaaa<br/>
            bbbbbbbbbbbbbbbbbbbbbbb<br/>
            ccccccccccccccccccccccc<br/>
            ddddddddddddddddddddddd<br/>
            eeeeeeeeeeeeeeeeeeeeeee<br/>
            </div>
            <input type="button" onclick="copyc()" value="复制文本内容"/>
        </body>
        <script>
            var one=document.getElementById("one");
            
            function copyc(){
                var content=one.innerText;
                window.clipboardData.setData("Text",content);
            }
        </script>
    </html>
    复制文本到粘贴栏
  • 相关阅读:
    Java 中的悲观锁和乐观锁的实现
    乐观锁和悲观锁的区别
    理解RESTful架构
    修复Linux下curl等无法使用 Let's Encrypt 证书
    呕心沥血 AR VR 好资源分享
    linux服务器出现大量TIME_WAIT的解决方法
    Ubuntu系统 无法删除 redis-server
    Python Flask jsonify a Decimal Error
    微信小程序 订阅消息 对接详细记录
    FTP时显示500 Illegal PORT command的解决
  • 原文地址:https://www.cnblogs.com/aigeileshei/p/5618263.html
Copyright © 2020-2023  润新知