天天看点

Javascript(五)Javascript基础(浏览器对象BOM)

在Javascript(一) Javascript与HTML结合使用简单学习中提到了javascript的语言组成,其中有BOM浏览器对象模型,要学习javascript语言BOM的学习也就必不可少了。

BOM组成

BOM Window

BOM Navigator

BOM Screen

BOM History

BOM Locatiom

BOM Window

innerheight、innerwidth 与outerheight 、outerwidth

type="text/javascript">

        /**
         * window对象的属性:
         *      innerheight 返回窗口的文档显示区的高度。不包括工具栏
         *      innerwidth  返回窗口的文档显示区的宽度。不包括滚动条
         *      outerheight 返回窗口的外部高度。包括工具栏
         *      outerwidth  返回窗口的外部宽度。包括滚动条
         */
        function init(){
            var innerheight= window.document.innerHeight;
            var innerwidth=window.document.innerWidth;
            alert("高度:" +innerHeight+"\n"+"宽度:"+innerWidth);
            var outheight=window.document.outerHeight;
            var outwidth=window.document.outerWidth;
            alert("高度:" +outheight+"\n"+"宽度:"+outwidth);
        }
        </script>
    <body onload="init()">      

三种对话框

alert("弹出一个alert");
 confirm("这是一个确认框”");
 prompt("输入框");      

opener与parent区别

opener:代表父窗口,应用opener要求两个窗口必须有父子关系,

以下2种情况具有父子关系:

1、超链接(设置target属性为_blank)

2、open方法打开的窗口

open.html页面

<script type="text/javascript">/**
      * window对象opener与parent
      * 
      * 
      */
     function fun(){
        window.open("open_sub.html");
     }

    </script>
    <body
        <input type="text" name="" id="txt"/>
        <input type="button" value="打开新的页面" onclick="fun()"
        <a href="open_sub.html" target="_blank">打开新页面</a>
    </body>      

open_sub.html

function fun(){
            //获取文本框内容
            var value=document.getElementById("txt").value;
            //获取父窗口对象
            var w=window.opener;
            //获得父窗口文本框对象
            var txt=w.document.getElementById("txt");
            //将内容赋值给父窗口文本框的value值
            txt.value=value;
        }
    </script>
    <body>
        <input type="text" name="" id="txt" />
        <input type="button" value="传递数据给父窗口" onclick="fun()"      
Javascript(五)Javascript基础(浏览器对象BOM)

parent:代表父窗口,应用情景有以下2种情况

1、框架

2、内嵌框架

parent.html

<script type="text/javascript">function fun(){
            //获取当前窗口的文本框内容
            var value=document.getElementById("txt").value;
            //获取子窗口的对象
            var w=window.frames[0];
            //获取子窗口中文本框对象
            var txt=w.document.getElementById("txt");
            //给子窗口中文本框赋值</script>
    <body>
        <input type="text" name="" id="txt"
        <input type="button" value="传递给子窗口" onclick="fun()"
        <iframe src="parent_sub.html"></iframe>
    </body>      

parent_sub.html

<script type="text/javascript">function fun(){
            var value=document.getElementById("txt").value;
            var w=window.parent;
            var txt=w.document.getElementById("txt");
            txt.value=value;
        }

    </script>
    <body>
        <input type="text" name="" id="txt"
        <input type="button" value="传递给父窗口" onclick="fun()"
    </body>      
Javascript(五)Javascript基础(浏览器对象BOM)

self属性等价于window

status状态栏

<script type="text/javascript">function init(){
        self.status="加载完成";
     }
    </script>
    <body onload="init()">
    </body>      

setTimeout()与setInterval()区别

BOM History

history.forward();//前进
history.back();//后退
history.go();//直接到某个历史页面      

BOM Location

window.location.href="parent.htmls";
window.location.reload();      

继续阅读