登录  /  注册
首页 > web前端 > js教程 > 正文

JavaScript Window - 浏览器对象模型

巴扎黑
发布: 2016-11-25 14:06:57
原创
1075人浏览过

javascript window - 浏览器对象模型 
浏览器对象模型 (bom) 使 javascript 有能力与浏览器“对话”。 



window 对象 
所有浏览器都支持 window 对象。它表示浏览器窗口。 
所有 javascript 全局对象、函数以及变量均自动成为 window 对象的成员。 
全局变量是 window 对象的属性。 
全局函数是 window 对象的方法。 

甚至 html dom 的 document 也是 window 对象的属性之一: 
window.document.getelementbyid("header"); 
与此相同: 
document.getelementbyid("header"); 



window 尺寸 
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。 
对于internet explorer、chrome、firefox、opera 以及 safari: 
window.innerheight - 浏览器窗口的内部高度 
window.innerwidth - 浏览器窗口的内部宽度 
对于 internet explorer 8、7、6、5: 
document.documentelement.clientheight 
document.documentelement.clientwidth 
或者 
document.body.clientheight 
document.body.clientwidth 

实用的 javascript 方案(涵盖所有浏览器): 
var w=window.innerwidth 
|| document.documentelement.clientwidth 
|| document.body.clientwidth; 

var h=window.innerheight 
|| document.documentelement.clientheight 
|| document.body.clientheight; 



其他 window 方法 
window.open() - 打开新窗口 
window.close() - 关闭当前窗口 
window.moveto() - 移动当前窗口 
window.resizeto() - 调整当前窗口的尺寸 



window screen 
window.screen 对象包含有关用户屏幕的信息。 

一些属性: 
screen.availwidth - 可用的屏幕宽度(属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。) 
screen.availheight - 可用的屏幕高度(属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。)



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

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

实例: 
<script> <br/>document.write(location.href); <br/></script> 
以上代码输出为: 
http://www.w3school.com.cn/js/js_window_location.asp 


location.assign 与 location.replace的区别 
window.location.assign(url) : 加载 url 指定的新的 html 文档。 就相当于一个链接,跳转到指定的url, 
当前页面会转为新页面内容,可以点击后退返回上一个页面。 

window.location.replace(url) : 通过加载 url 指定的文档来替换当前文档 ,这个方法是替换当前窗口页面, 
前后两个页面共用一个窗口,所以是没有后退返回上一页的。 



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



window navigator 
window.navigator 对象包含有关访问者浏览器的信息。 



javascript 消息框 
在 javascript 中创建三种消息框:警告框、确认框、提示框。 

警告框 
当警告框出现后,用户需要点击确定按钮才能继续进行操作。 
语法: 
alert("文本") 


确认框 
当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。 
如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。 

语法: 
confirm("文本") 

实例: 
 


提示框 
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。 
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。 

语法: 
prompt("文本","默认值") 

实例: 
 



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

settimeout() 
语法 
var t=settimeout("javascript语句",毫秒) 
第一个参数是含有 javascript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用 

实例: (无穷循环) 
 


cleartimeout() 
语法 
cleartimeout(settimeout_variable) //settimeout_variable就是创建时的定时器引用(变量) 

实例: 
function stopcount() 

cleartimeout(t) 

 



javascript cookies 
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。 
你可以使用 javascript 来创建和取回 cookie 的值。 

cookie是以键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔。 
document.cookie = "name=value;expires=date;path=path" 
document.cookie = "username=darren;path=/;domain=qq.com" 

创建和存储 cookie 
function setcookie(c_name,value,expiredays) 

var exdate=new date() 
exdate.setdate(exdate.getdate()+expiredays) 
document.cookie=c_name+ "=" +escape(value)+ 
((expiredays==null) ? "" : ";expires="+exdate.togmtstring()) 


读取cookies 
function getcookie(c_name) 

if (document.cookie.length>0) //检查 document.cookie 对象中是否存有 cookie 
  { 
  c_start=document.cookie.indexof(c_name + "=") 
  if (c_start!=-1) 
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexof(";",c_start) 
    if (c_end==-1) c_end=document.cookie.length 
    return unescape(document.cookie.substring(c_start,c_end)) 
    } 
  } 
return "" 



设置cookie的有效期 
在默认的情况下,cookie 会在浏览器关闭的时候自动清除,但是我们可以通过expires来设置 cookie 的有效期。 
document.cookie = "name=value;expires=date" 

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号