JavaScript学习笔记（七）：js 浏览器对象模型 (BOM)

 

JavaScript Window - 浏览器对象模型

 

小案例1：显示浏览器窗口的高度和宽度

• innerHeight / clientHeight 浏览器窗口的内部高度(包括滚动条)
• innerWidth / clientWidth 浏览器窗口的内部宽度(包括滚动条)

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

document.getElementById("demo").innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。";

</script>

 

小案例2：显示浏览器窗口的一些其他方法

• window.open(URL,name,features,replace) - 打开新窗口

参数	描述
URL	可选。声明了要在新窗口中显示的文档的 URL。值是空字符串，新窗口就不会显示任何文档。
name	可选。该字符声明了新窗口的名称。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features	可选。声明了新窗口要显示的标准浏览器的特征。
replace	可选。 true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。

打开一个 200 * 100 的新窗口和指定窗口的方法：

function openWin(){
    myWindow=window.open('','','width=200,height=100');
    myWindow.document.write("<p>这是我的窗口</p>");
}

function open_win() {
    window.open("http://www.baidu.com.cn")
}

• window.close() - 关闭当前窗口
• window.moveTo(x,y) - 移动当前窗口

function moveWin(){
    myWindow.moveTo(0,0);
    myWindow.focus(); // 把键盘焦点给予一个窗口
}

• resizeTo(width,height) - 调整当前窗口的尺寸

参数	描述
width	必需。想要调整到的窗口的宽度。以像素计。
height	可选。想要调整到的窗口的高度。以像素计。

function resizeWindow() {
  window.resizeTo(500,300)
}

 

JavaScript Window Screen

属性	描述
screen.availWidth	可用的屏幕宽度。属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
screen.availHeight	可用的屏幕高度。属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

 

JavaScript Window Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

window.location 对象在编写时可不使用 window 这个前缀。

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

 

小案例3：使用 location.assign() 加载一个新文档

<script>
function newDoc(){
    window.location.assign("http://www.baidu.com")
}
</script>
<input type="button" value="加载新文档" onclick="newDoc()">

 

JavaScript Window History

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

小案例4：back() 方法和 forward() 方法的简单运用

• history.back() - 加载历史列表中的前一个 URL。 与在浏览器点击后退按钮相同。

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

• history.forward() - 加载历史列表中的下一个 URL。与在浏览器中点击向前按钮相同。

<script>
function goForward() {
    window.history.forward()
}
</script>
<input type="button" value="Forward" onclick="goForward()">

除此之外可以用 history.go() 这个方法来实现向前，后退的功能。

<script>
    function a(){
        history.go(1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
    }
    function b(){
        history.go(-1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
    }    
</script>
<input type="button" value="前进" onclick="a()">
<input type="button" value="后退" onclick="b()">

 

JavaScript 计时事件

做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

小案例4：计时事件 History () 和 setTimeout() 方法的运用

• setInterval("javascript function",milliseconds) - 间隔指定的毫秒数不停地执行指定的代码。

显示一个时钟并设置停止事件：

// 每隔一秒，不停地执行 myTimer() 方法
var myVar = null;
function Interval() {
    myVar = setInterval(function(){myStarTime()}, 1000);
}
function myStarTime() {
    var d = new Date();
		
    // 根据本地时间把 Date 对象的时间部分转换为字符串
    var t = d.toLocaleTimeString();
		
    document.getElementById("time").innerHTML = t;
}
// 停止时钟
function IntStopTime() {
    // 在创建计时方法时你必须使用全局变量
    clearInterval(myVar);
}

<div id="time"></div>
<button onclick="Interval()">开始</button>
<button onclick="IntStopTime()">停止</button>

• setTimeout("javascript function", milliseconds) - 在指定的毫秒数后执行指定代码。

function starTime() {
    var day = new Date();
    var h = day.getHours();
    var m = day.getMinutes();
    var s = day.getSeconds();

    // 在小于10的数字前加一个‘0’
    m = checkTime(m);
    s = checkTime(s);

    var x = document.getElementById("date").innerHTML = h + ":" + m + ":" + s;

    // 重复调用 starTime()
    /*setTimeout(code,millisec)
      code 要调用的函数后要执行的 JavaScript 代码串。
      millisec 在执行代码前需等待的毫秒数。*/
    var t = setTimeout(function() {starTime()}, 500);
}
// 在小于10的数字前加一个‘0’
function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
// 停止时钟
function TTStopTime() {
    clearTimeout(t);
}

<div id="date"></div>
<button onclick="starTime()">开始</button>
<button onclick="TTStopTime()">停止</button>