BOM浏览器模式和window对象的简介

程序员文章站 2022-04-17 09:18:07
...
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>
BOM浏览器模式和window对象学习
</title>
  <!--
   BOM浏览器模式(Browser Object Mode)这是一种理想的模式，如果每个浏览器开发商都按照这种方式来开发，
   就会提高开发效率，使互联网朝着健康的方向发展。
  具体的实现是window对象
  
 
1.框体方法
：alert();警告，无返回值
     confirm();确认，有返回值，确定返回true，取消返回false
     prompt();提示，有返回值，确定返回当前输入的值，取消返回null
   
2.定时执行和间隔执行
：
    setTimeOut(code expresion,time)，指定时间后开辟线程执行指定的函数，返回线程id
    setInterval(code expresion,time),指定时间后开辟线程执行指定的函数，返回id
    ClearInterval(id),关闭指定的interval开启的线程
    ClearTimeOut(id),关闭指定的Timeout开启的线程
  
 3.子页面
    open()使用此方法可以打开当前页面的子页面，使用以下属性可以设置子页面窗口的大小和其他属性
    //height width top left 
    //toolbar=yes; menubar=yes;scrollbars=no;resizable=no;location=no;status=no; 
    
    close(),在open()打开的子页面中调用此方法
    
   
 重要属性
    opener
,使用opener可以调用父页面的函数 window.opener.函数名();
  -->
  <script type="text/javascript">
  //window方法举例
   //1.警告框
   function testAlert(){
    window.alert("我是警告框");
   }
   //2.确认框
   function testConfirm(){
    var flag=window.confirm("你要卸载我吗？");
    window.alert(flag);
   }
   //3.提示框
   function testPrompt(){
    var str=window.prompt("请输入昵称：","例如：李白");
    window.alert(str);
   }
   /*--------------------------------------------------------------------------*/
   //定时执行
   var tid;
   function testSetTimeOut(){
    tid=window.setTimeout(function(){
     alert("定时执行");
    },3000);
   }
   //间隔执行
   var id;
   function testInterval(){
    id=window.setInterval(function(){
     alert("间隔执行");
    },2000);
   }
   //关闭间隔执行
   function testClearInterval(){
    window.clearInterval(id);
   }
   //关闭定时执行
   function testClearTimeOut(){
    window.clearTimeout(tid);
   }
/*----------------------------------------------------------------------------------------*/
   function testOpen1(){
    window.open("http://www.baidu.com");//使用open打开网络资源
    
   }
   function testOpen2(){
    window.open("sun.html");//使用open打开本地资源
    
   }
   //属性
   function testOpener(){
    alert("我是Opener");
   }
  </script>
 </head>
 <body>
  <input type="button" id="" value="测试windowAlert" onclick="testAlert();"/>
  <input type="button" id="" value="测试Confirm" onclick="testConfirm();"/>
  <input type="button" id="" value="测试prompt" onclick="testPrompt();" />
  <hr />
  <input type="button" id="" value="测试setTimeOut" onclick="testSetTimeOut();"/>
  <input type="button" id="" value="测试interval" onclick="testInterval();"/>
  <input type="button" id="" value="测试关闭clearInterval" onclick="testClearInterval();"/>
  <input type="button" id="" value="测试关闭TimeOut" onclick="testClearTimeOut();"/>
  <hr />
  <input type="button" id="" value="测试子页面" onclick="testOpen1();"/>
  <input type="button" id="" value="测试打开本地资源" onclick="testOpen2();"/>
 </body>
</html>
以上就是BOM浏览器模式和window对象的简介的详细内容，更多请关注其它相关文章！