我爱编程

JS 浏览器BOM（浏览器对象模型）

2017-06-05  本文已影响0人  figure_ai

JS Window-浏览器对象模型

Window对象

Window尺寸

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

其他Window方法

JS 获取有关用户屏幕信息

Window Screen 可用宽度

   <script>
document.write("可用宽度: " + screen.availWidth);
</script>

Window Screen 可用高度

   <script>
document.write("可用高度: " + screen.availHeight);
</script>

JS Window Location对象

获取URL（href）

<script>
//输出当前页面的URL
document.write(location.href);
</script>
//输出： http://www.runoob.com/js/js-window-location.html

获取URL路径名（pathname）

<script>
document.write(location.pathname);
</script>
//输出： /js/js-window-location.html

加载新文档（网页）

//加载一个新文档，即打开http://www.w3cschool.cc这个页面
  <html>
<head>
<script>
function newDoc()
 {
 window.location.assign("http://www.w3cschool.cc")
 }
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>

JS 获取历史记录

后退网页

   <html>
<head>
<script>
function goBack()
  {
  window.history.back()
  }
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>

前进网页

JS获取浏览器信息

   <div id="example"></div> 
<script> 
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>"; 
txt+= "<p>浏览器名称: " + navigator.appName + "</p>"; 
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>"; 
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>"; 
txt+= "<p>硬件平台: " + navigator.platform + "</p>"; 
txt+= "<p>用户代理: " + navigator.userAgent + "</p>"; 
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>"; 
document.getElementById("example").innerHTML=txt; 
</script> 

           if(window.opera) {
            //此为Opera浏览器
           }

JS 弹窗

警告框

   //这里也可以省略window前缀，直接使用alert()方法
   window.alert("sometext");

   <!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    alert("你好，我是一个警告框！");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="显示警告框">
</body>
</html>

提示框

window.prompt("sometext","defaultvalue");

   var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!="")
{
    x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}

确认框

   //这里的window可以省略
   window.confirm("sometext");

   var r=confirm("按下按钮");
if (r==true)
{
    x="你按下了\"确定\"按钮!";
}
else
{
    x="你按下了\"取消\"按钮!";
}

JS计时事件

setInterval()方法

   window.setInterval("javascript function", milliseconds);

   //每3秒弹出一个hello
   setInterval(function(){alert("Hello")},3000);

   var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}

clearInterval()方法

   clearInterval(intervalVariable)

   <p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction()
{
clearInterval(myVar);
}
</script>

setTimeout()方法

   window.setTimeout("javascript 函数",毫秒数);

   //等待3秒，弹出hello
   setTimeout(function(){alert("hello")},3000);

clearTimeout()

   clear.Timeout(timeoutVariable)

   var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}

JS Cookie

   username = Lch

使用JS创建cookie

   document.cookie = "username=LCH"

   document.cookie="username=LCH; expires=Thu,  18 Dec 2013 12:00:00 GMT"

   document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

   //cname: cookie的名称；cvalue: cookie的值；expires: cookie的过期时间
   function setCookie(cname, cvalue, exdays)
   {
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
   }

使用JS读取cookie

   var x = document.cookie;

function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

使用JS修改cookie

   document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

使用JS删除cookie

   document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

检测cookie值的函数

function checkCookie()
{
 var username=getCookie("username");
 if (username!="")
 {
   alert("Welcome again " + username);
 }
 else 
 {
   username = prompt("Please enter your name:","");
   if (username!="" && username!=null)
   {
     setCookie("username",username,365);
   }
 }
}
上一篇 下一篇

猜你喜欢

热点阅读