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

        
    "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;
        }
    
    
        "text" name="" id="txt" />
        "button" value="传递数据给父窗口" οnclick="fun()" />
    

Javascript(五)Javascript基础(浏览器对象BOM)_第1张图片
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");
            //给子窗口中文本框赋值
            txt.value=value;
        }

    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)_第2张图片

self属性等价于window

status状态栏

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

setTimeout()与setInterval()区别

setTimeout()隔一段时间调用某个函数(只调用一次)相当于每次产生一个计时器,计时器时间到了就会销毁
setInterval()每隔一段时间调用某个函数(调用多次)只产生一个计时器,只能通过clearInterval()方法才能停止该方法
清除分别使用 clearTimeout()和clearInterval()

BOM History

history对象:存储了访问过的页面

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

BOM Location

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

你可能感兴趣的:(JS)