JavaScript学习笔记(七):js 浏览器对象模型 (BOM) 忘是亡心i 2022-04-23 04:38 117阅读 0赞 ## 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) - 打开新窗口 <table> <tbody> <tr> <td style="text-align:center;vertical-align:middle;width:104px;">参数</td> <th style="text-align:center;vertical-align:middle;">描述</th> </tr> <tr> <td style="width:104px;">URL</td> <td>可选。声明了要在新窗口中显示的文档的 URL。值是空字符串,新窗口就不会显示任何文档。</td> </tr> <tr> <td style="width:104px;">name</td> <td>可选。该字符声明了新窗口的名称。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。</td> </tr> <tr> <td style="width:104px;">features</td> <td>可选。声明了新窗口要显示的标准浏览器的特征。</td> </tr> <tr> <td style="width:104px;">replace <p> </p> </td> <td> <p>可选。</p> <ul> <li>true - URL 替换浏览历史中的当前条目。</li> <li>false - URL 在浏览历史中创建新的条目。</li> </ul></td> </tr> </tbody> </table> 打开一个 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) - 调整当前窗口的尺寸 <table> <tbody> <tr> <th style="text-align:center;vertical-align:middle;">参数</th> <th style="text-align:center;vertical-align:middle;">描述</th> </tr> <tr> <td>width</td> <td>必需。想要调整到的窗口的宽度。以像素计。</td> </tr> <tr> <td>height</td> <td>可选。想要调整到的窗口的高度。以像素计。</td> </tr> </tbody> </table> function resizeWindow() { window.resizeTo(500,300) } # # ## JavaScript Window Screen ## <table> <tbody> <tr> <td style="text-align:center;vertical-align:middle;">属性</td> <td style="text-align:center;vertical-align:middle;">描述</td> </tr> <tr> <td>screen.availWidth</td> <td>可用的屏幕宽度。属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。</td> </tr> <tr> <td>screen.availHeight</td> <td>可用的屏幕高度。属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。</td> </tr> </tbody> </table> ## JavaScript Window Location ## window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。 window.location 对象在编写时可不使用 window 这个前缀。 <table> <tbody> <tr> <td style="text-align:center;vertical-align:middle;width:155px;">属性</td> <td style="text-align:center;vertical-align:middle;width:692px;">描述</td> </tr> <tr> <td style="width:155px;">location.hostname</td> <td style="width:692px;">返回 web 主机的域名。</td> </tr> <tr> <td style="width:155px;">location.pathname</td> <td style="width:692px;">返回当前页面的路径和文件名。</td> </tr> <tr> <td style="width:155px;">location.port</td> <td style="width:692px;">返回 web 主机的端口 (80 或 443)。</td> </tr> <tr> <td style="width:155px;">location.protocol</td> <td style="width:692px;">返回所使用的 web 协议(http:// 或 https://)。</td> </tr> <tr> <td style="width:155px;">location.href</td> <td style="width:692px;">属性返回当前页面的 URL。</td> </tr> <tr> <td style="width:155px;">location.assign()</td> <td style="width:692px;">方法加载新的3文档。</td> </tr> </tbody> </table> ## ## ### 小案例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>
还没有评论,来说两句吧...