js(javaScript)学习系列--window_javascript windows.$-优快云博客

本文链接：https://blog.youkuaiyun.com/u013818990/article/details/52136999

本文介绍了如何使用JavaScript操作浏览器窗口，包括获取窗口尺寸、位置、调整窗口大小等方法，并展示了如何利用window对象进行页面跳转及历史记录的前进后退操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

还是那句话，可以去看w3school

获得window窗口大小

该例显示浏览器窗口的高度和宽度：（不包括工具栏/滚动条
实用的 JavaScript 方案（涵盖所有浏览器）：

var w=window.innerWidth<!--Internet Explorer、Chrome、Firefox、Opera 以及 Safari-->
|| document.documentElement.clientWidth<!--Internet Explorer 8、7、6、5-->
|| document.body.clientWidth;<!--Internet Explorer 8、7、6、5-->

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

其他方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口
dow.moveTo() - 移动当前窗口
ndow.resizeTo() - 调整当前窗口的尺寸

screen

window.screen 对象在编写时可以不使用 window 这个前缀。
一些属性：访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

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。（http://www.w3school.com.cn/js/js_window_location.asp）
location.pathname 属性返回 URL 的路径名。（/js/js_window_location.asp）
Location Assign Location.assign() 方法加载新的文档。

<!DOCTYPE html>
<html>
<head>
<script>
function newDoc()
 {
 window.location.assign("http://www.w3school.com.cn")
 }
</script>
</head>
<body>
<input type="button" value="加载新文档" onclick="newDoc()">
</body>
</html>

history

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

Navigator

navigator 对象包含有关访问者浏览器的信息
来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：
navigator 数据可被浏览器使用者更改
浏览器无法报告晚于浏览器发布的新操作系统

由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。
由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 “window.opera”，您可以据此识别出 Opera。
例子：if (window.opera) {…some action…}

cookies

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

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{ 
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)
<!--unescape 对字符串进行解码-->
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
} 
}
return ""
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
<!--escape 对字符串进行编码-->
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else 
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>