您的位置：首页 > 移动开发 > Objective-C

Javascript BOM即浏览器对象模型Brower Object Model（Window、Navigator、Screen、History、Location、弹出框、计时器）

2018-01-17 01:30 991 查看

BOM即浏览器对象模型(Brower Object Model)

浏览器对象包括

Window(窗口)

Navigator(浏览器)

Screen (客户端屏幕)

History(访问历史)

Location(浏览器地址)
Window(窗口)

1.获取文档显示区域的高度和宽度

一旦页面加载，就会自动创建window对象，所以无需手动创建window对象。

通过window对象可以获取文档显示区域的高度和宽度

<script>
document.write("文档内容");
document.write("文档显示区域的宽度"+window.innerWidth);
document.write("<br>");
document.write("文档显示区域的高度"+window.innerHeight);
</script>

2.获取外部窗体的宽度和高度

所谓的外部窗体即浏览器，可能用的是360，火狐，IE, Chrome等等。

<script>

document.write("浏览器的宽度:"+window.outerWidth);
document.write("<br>");
document.write("浏览器的高度:"+window.outerHeight);

</script>

3.打开一个新的窗口

有的时候，你碰到一些网站会自动打开另一个网站，那么是怎么做到的呢?

就是通过window的open方法做到的

不建议使用，如果需要打开一个新的网站，应该通过超级链接等方式让用户主动打开，在没有告知用户的前提下就打开一个新的网站会影响用户的体验

<script>
function openNewWindow(){
myWindow=window.open("/");
}
</script>

<button onclick="openNewWindow()">打开一个新的窗口</button>

Navigator(浏览器)

Navigator即浏览器对象，提供浏览器相关的信息

打印浏览器相关信息

<script type="text/javascript">
document.write("<p>浏览器产品名称：");
document.write(navigator.appName + "</p>");

document.write("<p>浏览器版本号：");
document.write(navigator.appVersion + "</p>");

document.write("<p>浏览器内部代码：");
document.write(navigator.appCodeName + "</p>");

document.write("<p>操作系统：");
document.write(navigator.platform + "</p>");

document.write("<p>是否启用Cookies：");
document.write(navigator.cookieEnabled + "</p>");

document.write("<p>浏览器的用户代理报头：");
document.write(navigator.userAgent + "</p>");
</script>

Screen (客户端屏幕)

Screen对象表示用户的屏幕相关信息

返回用户的屏幕大小，以及可用屏幕大小

通常看到的可用区域的高度会比屏幕高度小一点，因为有任务栏的存在。

<html>
<body>
<script type="text/javascript">
document.write("用户的屏幕分辨率: ")
document.write(screen.width + "*" + screen.height)
document.write("<br />")
document.write("可用区域大小: ")
document.write(screen.availWidth + "*" + screen.availHeight)
document.write("<br />")
</script>
</body>
</html>

History(访问历史)

History用于记录访问历史

1.返回上一次的访问

<script>
function goBack()
{
history.back();
}
</script>

<button onclick="goBack()">返回</button>

2.返回上上次的访问

<script>
function goBack()
{
history.go(-2); //-1表示上次，-2表示上上次，以次类推
}
</script>

<button onclick="goBack()">返回上上次</button>

Location表示浏览器中的地址栏

1.刷新当前页面

reload方法刷新当前页面

<span>当前时间:</span>
<script>
var d = new Date();
document.write(d.getHours());
document.write(":");
document.write(d.getMinutes());
document.write(":");
document.write(d.getSeconds());
document.write(":");
document.write(d.getMilliseconds());

function refresh(){
location.reload();
}
</script>

<br>
<button onclick="refresh()">刷新当前页面</button>

2.跳转到另一个页面

<script>
function jump(){
//方法1
//location="/";

//方法2
location.assign("/");

}
</script>

<br>
<button onclick="jump()">跳转到首页</button>

3.Location的其他属性

<script>
function p(s){
document.write(s);
document.write("<br>");
}

p("协议 location.protocol:"+location.protocol);
p("主机名 location.hostname:"+location.hostname);
p("端口号 (默认是80，没有即表示80端口)location.port:"+location.port);

p("主机加端口号 location.host:"+location.host);
p("访问的路径  location.pathname:"+location.pathname);

p("锚点 location.hash:"+location.hash);
p("参数列表 location.search"+location.search);

</script>

JAVASCRIPT 弹出框

浏览器上常见的弹出框有

警告框，确认框，提示框这些都是通过调用window的方法实现的。

比如警告框用的是window.alert("警告内容")，因为很常用，所以就把window省略掉，直接使用alert

1.警告框

警告框 alert，常用于消息提示，比如注册成功等等

<script>
function register(){
alert("注册成功");
}
</script>

<br>
<button onclick="register()">注册</button>

2.确认框

确认框 confirm，常用于危险性操作的确认提示。比如删除一条记录的时候，弹出确认框

confirm返回基本类型的Boolean true或者false

<script>
function del(){
var d = confirm("是否要删除");
alert(typeof d + " " + d);
}
</script>

<br>
<button onclick="del()">删除</button>

3.输入框

输入框 prompt，用于弹出一个输入框，供用户输入相关信息。因为弹出的界面并不好看，很有可能和网站的风格不一致，所以很少会在实际工作中用到。

<script>
function p(){
var name = prompt("请输入用户名:");
alert("您输入的用户名是:" + name);
}
</script>

<br>
<button onclick="p()">请输入用户名</button>

JAVASCRIPT 计时器

1.只执行一次

函数setTimeout(functionname, 距离开始时间毫秒数 );

通过setTimeout在制定的毫秒数时间后，执行一次函数functionname

本例在3秒钟后，打印当前时间。

解释:

document.getElementById 获取id=time的div元素

.innerHTML 修改该元素的内容

<script>

function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;

}

function showTimeIn3Seconds(){
setTimeout(printTime,3000);
}

</script>
<div id="time"></div>
<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间，并且只显示一次</button>

2.不停地重复执行

函数setInterval(函数名, 重复执行的时间间隔毫秒数 );

通过setInterval重复执行同一个函数，重复的时间间隔由第二个参数指定

<p>每隔1秒钟，打印当前时间</p>

<div id="time"></div>

<script>

function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;

}

var t = setInterval(printTime,1000);

</script>

<br><br>

3.终止重复执行

通过clearInterval终止一个不断重复的任务

本例，当秒是5的倍数的时候，就停止执行

<p>每隔1秒钟，打印当前时间</p>

<div id="time"></div>

<script>

var t = setInterval(printTime,1000);

function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;
if(s%5==0)
clearInterval(t);
}

</script>
<br>

4.不要在setInterval调用的函数中使用document.write();

注：部分浏览器，比如firefox有这个问题，其他浏览器没这个问题。

假设setInterval调用的函数是printTime, 在printTime中调用document.write();

只能看到一次打印时间的效果。

这是因为document.write，会创建一个新的文档，而新的文档里，只有打印出来的时间字符串，并没有setInterval这些javascript调用，所以只会看到执行一次的效果。

<p>每隔1秒钟，通过document.write打印当前时间</p>

<script>

function printTime(){
var d = new Date();
document.write(d.getHours());
document.write(":");
document.write(d.getMinutes());
document.write(":");
document.write(d.getSeconds());
document.close();
}

var t = setInterval(printTime,1000);

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航