js 浏览器 BOM

浏览数：58 / 时间：2015年06月09日

js 浏览器 window

浏览器对象模型BOM使js有能力与浏览器对话。所有浏览器都支持window对象，它表示浏览器窗口。所有js全局变量，函数以及变量均自动成为window对象的成员。

// 确定浏览器窗口的尺寸
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

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

x=document.getElementById("demo");
x.innerHTML="Browser inner window width: " + w + ", height: " + h + "."
</script>

</body>
</html>

js window screen

window.screen对象包含有关用户屏幕的信息。在编写时可以不使用window这个前缀。

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

<!DOCTYPE html>
<html>
<body>

<script>

document.write("Available Width: " + screen.availWidth);
document.write(", Available Height: " + screen.availHeight);

</script>

</body>
</html>

js window location

window.location对象用于获得当前页面的地址URL，并把浏览器重定向到新的页面。在编写时也可以不用window前缀。

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href 返回当前页面的URL
location.assign 加载新的文档

<!DOCTYPE html>
<html>
<head>
<script>
function newDoc()
{
         window.location.assign("http://news.163.com")
}
</script>
</head>
<body>

<input type="button" value="加载新文档" onclick="newDoc()">

</body>
</html>

js window history

window.history对象包含浏览器的历史。在编写时可不使用window这个前缀。

history.back() - 返回加载历史列表中前一个url，与在浏览器点击后退按钮相同
history.forward() - 返回加载历史列表中后一个url，与在浏览器中点击按钮向前相同

js window navigator

window.navigator对象包含有关访问者浏览器的信息。在编写时可不使用window前缀。

<!DOCTYPE html>
<html>
<body>
<div id="example"></div>

<script>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

</body>
</html>

js 弹窗

js中可创建三种消息框：警告框，确认框，提示框。

弹窗使用\n来设置换行。例如：alert("Hellon\nHow are you?");

1）警告框用于确保用户得到某些信息。当他出现后，用户需点击确认按钮才能继续操作。

语法：window.alert("sometext");

上述方法前缀window可以不带上。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("I am an alert box!");
}
</script>
</head>
<body>

<input type="button" onclick="myFunction()" value="Show alert box">

</body>
</html>

2）确认框通常用于验证是否接受用户操作。当你点击 "确认", 确认框返回 true，如果点击 "取消", 确认框返回 false。

语法：window.confirm("sometext");

上述方法前缀window可以不带上。

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display a confirm box.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x;
var r=confirm("Press a button!");
if (r==true)
  {
  x="You pressed OK!";
  }
else
  {
  x="You pressed Cancel!";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

3）提示框经常用于提示用户在进入页面前输入某个值。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法：window.prompt("sometext","defaultvalue");

上述方法中前缀window可以不带上。

<!DOCTYPE html>
<html>
<body>

<p>点击按钮查看输入的对话框。</p>

<button onclick="myFunction()">点我</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x;

var person=prompt("请输入你的名字","Harry Potter");

if (person!=null)
  {
  x="你好 " + person + "! 今天感觉如何?";
  document.getElementById("demo").innerHTML=x;
  }
}
</script>

</body>
</html>

js 计时事件

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 暂停指定的毫秒数后执行指定的代码

setInteval语法：window.setInterval("javascript function",milliseconds);

前缀window可省略。

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>
<p id="demo"></p>

<script>
var myVar=setInterval(function(){myTimer()},1000);

function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>

</body>
</html>

clearInteval()方法用于停止setInterval()方法执行的函数代码。

语法：window.clearInterval(intervalVariable)

前缀window可以省略。要使用此方法，在创建setInterval()时必须使用全局变量。

myVar=setInterval("javascript function",milliseconds);

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>
<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>

</body>
</html>

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

<!DOCTYPE html>
<html>
<body>

<p>Click the button to wait 3 seconds, then alert "Hello".</p>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
setTimeout(function(){alert("Hello")},3000);
}
</script>

</body>
</html>

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

语法：window.clearTimeout(timeoutVariable)

前缀window可以省略。要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量。

myVar=setTimeout("javascript function",milliseconds);

<!DOCTYPE html>
<html>
<body>

<p>Click the first button alert "Hello" after waiting 3 seconds.</p>
<p>Click the second button to prevent the first function to execute. (You must click it before the 3 seconds are up.)</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myStopFunction()">Stop the alert</button>

<script>
var myVar;

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

function myStopFunction()
{
clearTimeout(myVar);
}
</script>

</body>
</html>

js cookies

cookies用于存储web页面的用户信息。当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。cookies可以记录用户名字，访问记录。

cookies以名/值对的形式存储。

当浏览器从服务器上请求 web 页面时，属于该页面的 cookies 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

JavaScript 可以使用document.cookie属性来创建、读取、及删除 cookies。

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

读取：var x = document.cookie;

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

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

<!DOCTYPE html>
<html>
<head>
<script>

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;
}

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 "";
}

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

</script>
</head>
<body onload="checkCookie()">
</body>
</html>