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; width: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>

复制文本到粘贴栏

BOM浏览器对象的更多相关文章

BOM浏览器对象模型和API速查
什么是BOMBOM是Browser Object Model的缩写,简称浏览器对象模型BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是wi ...
JS BOM(浏览器对象)
BOM即浏览器对象模型,它包括如下一些对象! (一)screen对象,Screen 对象中存放着有关显示浏览器屏幕的信息. 常见的属性有: availHeight:返回显示屏幕的高度 availWid ...
浏览器（BOM）对象的一些内置方法总结
浏览器(BOM)对象的一些内置方法总结一.总结 1.bom就是浏览器那端执行的代码,dom就是服务器那端操作html的代码 2.记好bom的几个对象,那就很好理解很多代码了,也很好写很多代码了二. ...
js中浏览器对象BOM
参考 : https://www.cnblogs.com/Peng2014/p/4725524.html 1. window对象 https://www.runoob.com/jsref/ob ...
BOM浏览器对象模型
访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model). BOM整体对象图. 核心是window对象: 以下有特殊双重身份: window对象既是ECMAScr ...
DOM_05之DOM、BOM常用对象
1.HTML DOM常用对象之Table:①创建:createTHead():createTBody():createTFoot():②删除:deleteTHead():deleteTFoot():③ ...
6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
Js浏览器对象
Js浏览器对象——window对象 1.window对象: (1)window对象是BOM的核心,window对象指当前的浏览器窗口. (2)所有的JavaScript全局对象.函数以及变量均自动成为 ...
第一百一十一节，JavaScript，BOM浏览器对象模型
JavaScript,BOM浏览器对象模型学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...

随机推荐

iOS导航栏-关闭半透明
self.navigationController.navigationBar.translucent = NO;
JUC回顾之-ThreadPoolExecutor的原理和使用
Spring中的ThreadPoolTaskExecutor是借助于JDK并发包中的java.util.concurrent.ThreadPoolExecutor来实现的.基于ThreadPoolEx ...
tomcat下context.xml中JNDI数据源配置
jndi(Java Naming and Directory Interface,Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API.命名服务将名称和对象联系起来,使得我们可以用 ...
经典SQL查询语句大全
一.基础1.说明:创建数据库CREATE DATABASE database-name2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建备份数 ...
一个国外网盘pCloud——支持离线下载
给大家分享一个国外网盘<支持离线下载> https://my.pcloud.com/#page=register&invite=HiegZ8aBrt7
Sublime Text 新建文件可选类型的模版插件: SublimeTmpl
安装方法: 1.Ctrl+Shift+P打开控制台, 2.输入IP安装插件 3.输入tmpl 回车安装编辑模版在:SublimeTmpl\templates"文件夹修改其他情况: htt ...
c 从语言中的内存管理
在C里,内存管理是通过专门的函数来实现.另外,为了兼容各种编程语言,操作系统提供的接口通常是 C 语言写成的函数声明(Windows 本身也由C和汇编语言写成). 1 分配内存 malloc 函数需 ...
[iOS]URL编码和解码
1. 首先来看下什么样的是URL编码(字符串中带有%22 类似这样的) NSString *str = @"http://m.tuniu.com/api/home/data/index/c/ ...
EXT实现表格斑马线
Ext.grid.GridPanel 单双行颜色样式(斑马线)2014-04-03 11:25 1078人阅读评论(0) 收藏举报分类:ExtJs(36)Ext.grid.GridPanel st ...
POJ3267——The Cow Lexicon(动态规划)
The Cow Lexicon DescriptionFew know that the cows have their own dictionary with W (1 ≤ W ≤ 600) wor ...

BOM浏览器对象

BOM浏览器对象的更多相关文章

随机推荐

热门专题