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 ...

随机推荐

使用Rails 4.2+ 测试异步邮件系统
[导读]异步测试总是一个很大的问题,邮件发送测试更是让很多开发同学不知道从哪里入手.在新版的Rails里,这类测试在很大程度上被简化了. 以下为译文在编写需要发送邮件的应用时,控制器是绝不能被阻塞的 ...
[排序] 快排 && 冒泡（自己写）
#include <iostream> using namespace std; /* 快速排序通过一趟排序,以轴点为界分割为两部分:左部分 <= 轴点 <= 右部分再分 ...
POJ 2227 The Wedding Juicer （优先级队列+bfs+dfs）
思路描述来自:http://hi.baidu.com/perfectcai_/item/701f2efa460cedcb0dd1c820也可以参考黑书P89的积水. 题意:Farmer John有一个 ...
ios开发之AppDelegate
创建应用程序之后之后,默认有AppDelegate.h文件与AppDelegate.m文件. AppDelegate为何物? AppDelegate为整个应用的一个代理,提供程序启动.退出等类似 ...
linux下关于gz和bz2压缩格式的常用操作技巧
.gz和.bz2都是linux下压缩文件的格式,有点类似windows下的.zip和.rar文件..bz2和.gz的区别在于,前者比后者压缩率更高,后者比前者花费更少的时间. 也就是说同一个文件,压缩 ...
lintcode:交错正负数
交错正负数给出一个含有正整数和负整数的数组,重新排列成一个正负数交错的数组. 注意事项不需要保持正整数或者负整数原来的顺序. 样例给出数组[-1, -2, -3, 4, 5, 6],重新排序之后 ...
jquery easyUi 配置默认页码
jquery easyUI用pagenation 属性如果修改其默认加载页面显示,配置该怎样写? 注意区分datagrid的pagenation分页的区别,代码如下. if ($.fn.paginat ...
Java学习笔记之：Java 定时任务
一.介绍在应用里经常都有用到在后台跑定时任务的需求.比如网络运营商会在每个月的一号对数据进行一次统计.在java中我们可以继承timertask类来实现定时任务. 二.笔记 /** * 定时任务 * ...
Mysql笔记——DDL
数据库模式定义语言DDL(Data Definition Language),是用于描述数据库中要存储的现实世界实体的语言.一个数据库模式包含该数据库中所有实体的描述定义. =========== ...
Spring AOP基础知识
Spring AOP使用动态代理技术在运行期织入增强的代码,两种代理机制包括:一是基于JDK的动态代理,另一种是基于CGLib的动态代理.之所以需要两种代理机制,很大程度上是因为JDK本身只提供接口的 ...

BOM浏览器对象

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

随机推荐

热门专题