客户端JavaScript（一）--窗口和框架_js window 客户端框架-优快云博客

本文链接：https://blog.youkuaiyun.com/xiao_fan__/article/details/105521043

本文介绍了JavaScript客户端编程中的窗口和框架操作，包括window属性、对话框、超时设定、navigator对象、screen对象、window控制方法、Location对象、history对象以及框架的使用。详细讲解了各种方法和属性，如alert、setTimeout、navigator.javaEnabled、screen.availWidth、window.open、history.back()等，帮助理解JavaScript如何与用户交互和管理窗口状态。

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

一、 window属性
在这里插入图片描述
二、简单的对话框
常用的对话框方法是alert（）、confirm（）和prompt（）

alert（）	向用户显示消息
confirm（）	要求用户点击OK或cancel按钮来确认或取消某个操作
prompt（）	要求用户输入一个字符串

alert（）

<html>
<head>
<title>页面标题</title>
<script language="javascript">
alert("小范啊啊啊啊");//在页面上弹出
</script>
</head>
</html>

confirm（）

<html>
<head>
<title>页面标题</title>
<script language="javascript"> 
confirm("你确定吗？"); //在页面上弹出确认对话框
</script>
</head>
</html>

prompt（）

<html>
<head>
<title>页面标题</title>
<script language="javascript">
var name,age;
name=prompt("你叫什么名字?"); /*在页面上弹出提示对话框，
将用户输入的结果赋给变量name*/
alert(name); //输出用户输入的信息
age=prompt("你今年多大了?","请在这里输入年龄"); /*在页面上再一次弹出提示对话框，
讲用户输入的信息赋给变量age*/
alert(age)//输出用户输入的信息
</script>
</head>
</html>

三、超时设定和时间间隔

1、超时设定
超时调用需要使用window对象的setTimeout()方法

setTimeout(function(){
    alert("hello xiaofan!");
},2000) //2秒过后执行函数
clearTimeout(timeoutId);//取消超时调用

如果超时调用已发生，则clearTimeout无效。

2、间歇调用
间歇调用是按照指定的时间间隔重复执行代码

var intervalId = setInterval(function(){
    alert("Hello xiaofan!");
},20000)

clearInterval(intervalId );//取消间歇调用

间歇调用和超时调用类似，但是取消间歇调用的重要性远远高于取消超时调用，因为超时调用在代码执行完后就会停止，它的超时调用ID也没有必要跟踪，而间歇调用会直到页面被卸载。最好的方式是尽量用超时调用代替间歇调用

四、navigator对象
Navigator 对象包含有关浏览器的信息。

1、Navigator对象属性
在这里插入图片描述
2、Navigator对象方法

javaEnabled()：规定浏览器是否支持并启用了 java

taintEnabled()：规定浏览器是否启用数据污点(data tainting)

五、Screen对象
screen对象通常包含下列属性(许多浏览器都加入了自己的属性)：

1.availHeight : 窗口可以使用的屏幕的高度（以像素计）其中包括操作系统元素（如window工具栏）需要的空间。

2.availWidth : 窗口可以使用的屏幕的宽度（以像素计）。

3.colorDepth : 用户表示的颜色的位数，大多数系统采用32位的。

4.height ：屏幕的高度，以像素计算。

5.width ：屏幕的宽度，以像素计算。

确定新窗口的大小时，availHeight和availWidth属性比较有用。比如可以用下面的代码填充用户的屏幕：

window.moveTo(0,0);

window.resizeTo(screen.availWidth,screen.availHeight);

六、window对象的控制方法

1、open()方法：
第一个参数是要在新窗口打开的页面的URL，若给此参数传送空字符串，得到的是一个空白页面，再使用document.write()方法在新窗口中动态插入html.第二个参数是要分配给新窗口的名称，这个不是为了提供给脚本使用，而是提供给a连接target属性使用，即点击该连接时会打开这个名称的窗口。

<a href="downhtml.html" target="myopen">fff </a>

这表示单击连接时，downhtml.html页面会加载到新窗口，而不是当前窗口中。form元素的target属性也是这样。
打开的新窗口中，窗口会默认带一些属性，如width和height，该方法的第三个参数可以指定这些属性，另外很多浏览器窗口的大多特性都是默认关闭。

2、close()方法：
关闭刚打开的窗口。

3、窗口的几何大小、滚动

moveTo(),moveBy()：调整窗口位置的两个函数

resizeTo(),resizeBy()：调整窗口大小的两个函数

scrollTo()和scrollBy()：调整窗口滚动条的偏移位置的两个函数

七、Location对象
Location对象包含有关当前URL的信息。location对象是window对象的一部分，可以通过window.location属性访问。

1、Location对象属性
在这里插入图片描述
2、location对象方法
assign() 加载新文档
reload() 重新加载当前文档
replace() 用新的文档替换当前文档

八、history对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

语法：window.history.[属性|方法]
window可以省略。

history对象属性：length 返回浏览器历史列表中URL的数量

history对象方法：

back（）	加载history列表中的前一个URL
forward（）	加载history列表中的下一个URL
go（）	加载history列表中的某个具体的页面

1、back()
返回前一个浏览的页面
语法：history.back();

2、forward()
回到倒退之前浏览的页面
语法：history.forward();

3、go()
返回浏览历史中的其他页面
语法：history.go(number);

go()相当于前面back()和forward()的集合体

二、框架

每个window对象都有一个frames[]数组来引用它包含的框架，注意，如果一个窗口没有包含其他框架了，则该窗口的frames[]数组为空，frames[]数组的使用只适用窗口中存在框架的情况下，如window.frames[0]表示的是该窗口对它里面所包含的第一个框架的引用，window.frames[0].frames[0]表示的是对嵌套框架的引用。

如果给框架指定了名字（即它的name属性），对那个框架的引用就会被存储到它的父window对象的一个新属性中，这个新属性的名字和框架的名字一样，因此可以用window.框架名来引用一个框架，注意，这里的window和框架只能是父子关系，祖孙关系都不行

函数是在定义它的作用域中执行，而不是在调用它的作用域中执行，例如，函数f()是在框架A中定义的，如果在框架B中调用它，则该函数的运行环境还是相当于在框架A中，如果函数f()中引用了全局变量，则它会在框架A中查找这些变量，而不是在框架B中。

不同框架中的变量、函数等可以被不同框架相互调用