Home > Article > Web Front-end > Introduction to BOM browser mode and window object

Introduction to BOM browser mode and window object

一个新手Original: 2017-10-11 09:43:531273browse

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

The above is the detailed content of Introduction to BOM browser mode and window object. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to display timeNext article：How to display time

See more

Introduction to BOM browser mode and window object

Related articles