前端(JavaScript)函数_窗口操作

文档概述

轻语言网站开发中的窗口操作函数、用于控制浏览器窗口行为，包含页面跳转、窗口打开、CSS/JS文件加载、组件居中、页面标题设置等窗口操作功能，常用于页面导航、资源加载、窗口控制等场景。

• 对话框与提示：信息框/确认框/弹出提示/弹出输入框 提供不同交互级别的用户提示
• 窗口控制：切换页面/打开新窗口/关闭窗口/置窗口尺寸/移动窗口 控制窗口行为
• 页面信息：取页面标题/置页面标题/取页面图标/置页面图标/取页面背景色/置页面背景色 管理页面元信息
• 组件布局：置组件居中/置组件水平居中/置组件垂直居中/批量赋值/置组件宽度 控制组件布局
• 数据编码：BASE64编码/BASE64解码 用于简单的字符串编码转换
• 页面参数：切换页面 传递数据，取请求参数 接收数据

💡 页面切换传参：切换页面("页面名", "key1=value1&key2=value2") 传递键值对格式数据，目标页面用 取请求参数() 接收参数对象，通过 参数["key"] 访问具体值。注意：传递值必须为文本且为键值对格式。

函数：信息框(信息内容)

显示一个警告对话框，参数为待显示的信息内容。

' 显示简单的信息提示
信息框("欢迎来到本网站！")
' 显示操作结果
信息框("保存成功！")
' 显示带变量的信息
变量 用户名 = "张三"
信息框("您好，" + 用户名 + "！")

函数：确认框(确认内容)

显示一个确认对话框，返回用户点击确认或取消的结果。

' 删除前确认
变量 结果 = 确认框("确定要删除这条记录吗？")
如果(结果)
	调试输出("用户确认删除")
	' 执行删除操作...
否则
	调试输出("用户取消删除")
结束 如果
' 退出前确认
变量 是否退出 = 确认框("您有未保存的修改，确定要退出吗？")
如果(是否退出)
	关闭窗口()
结束 如果

函数：弹出提示(提示信息,持续时间)

在页面底部弹出一个文本提示，默认2秒后自动消失，参数持续时间单位：毫秒。代码示例：弹出提示("操作成功", 3000)

' 在页面底部弹出提示信息，持续3秒钟
弹出提示("操作成功", 3000)
' 使用默认持续时间（2秒）
弹出提示("保存完成")

函数：弹出输入框(提示信息)

弹出一个可提示用户输入的对话框，并返回用户的输入内容。

' 弹出一个输入对话框，并返回用户输入的内容
变量 输入结果 = 弹出输入框("请输入用户名")
调试输出("用户输入：" + 输入结果)

函数：调试输出(值)

将指定的值，对象，数组值输出到浏览器控制台（Console），一般浏览器按电脑键盘“F12”键可打开浏览器调试控制台。

' 输出字符串
调试输出("这是一条调试信息")
' 输出变量值
变量 用户名 = "张三"
变量 年龄 = 25
调试输出("姓名: " + 用户名 + "，年龄: " + 年龄)
' 输出数组
变量 水果 = ["苹果", "香蕉", "橙子"]
调试输出(水果)
' 输出对象
变量 用户 = { "姓名": "李四", "年龄": 30 }
调试输出(用户)

函数：调试输出对象(对象)

在控制台中输出指定对象信息。

变量 坐标 = { X: 100, Y: 200 }
' 输出对象信息
调试输出对象(坐标)

函数：请求窗口聚焦()

将焦点设置到当前窗口。

' 将焦点设置到当前窗口
请求窗口聚焦()
' 从子窗口回到主窗口时聚焦
变量 子窗口 = 打开新窗口("child.html")
子窗口.关闭()
请求窗口聚焦()  ' 回到主窗口

函数：请求窗口失焦()

移除当前窗口的焦点。

' 移除当前窗口焦点
请求窗口失焦()
' 在打开新窗口后让当前窗口失焦
打开新窗口("popup.html")
请求窗口失焦()

函数：滚动页面内容(X坐标, Y坐标)

将窗口页面内容滚动到指定坐标位置，坐标原点：页面左上角。代码示例：滚动页面内容(0, 500)

' 滚动到页面顶部
滚动页面内容(0, 0)
' 滚动到指定坐标位置，X=100，Y=500
滚动页面内容(100, 500)

函数：滚动相对位置(X偏移, Y偏移)

将窗口页面内容相对于当前位置滚动指定的偏移量。代码示例：滚动相对位置(0, 100)

' 向下滚动100像素
滚动相对位置(0, 100)
' 向右滚动50像素，向下滚动200像素
滚动相对位置(50, 200)

函数：停止加载()

停止窗口加载资源，类似浏览器的停止按钮。

' 停止页面加载
停止加载()
' 在用户点击取消按钮时停止加载
取消按钮.置被单击回调(() => {
	停止加载()
	弹出提示("已停止加载")
})

函数：置窗口尺寸(宽度,高度)

设置窗口尺寸大小，单位：像素。代码示例：置窗口尺寸(800, 600)

' 将窗口尺寸设置为800x600像素
置窗口尺寸(800, 600)
' 设置为全屏尺寸
置窗口尺寸(取窗口宽度(), 取窗口高度())

函数：调整窗口尺寸(宽度增减,高度增减)

调整窗口尺寸大小，窗口左上角位置不变，根据参数值增减窗口宽高，单位：像素。代码示例：调整窗口尺寸(100, 50)

' 窗口宽度增加100像素，高度增加50像素
调整窗口尺寸(100, 50)
' 窗口宽度减少50像素，高度减少100像素
调整窗口尺寸(-50, -100)

函数：打印页面()

打开打印对话框打印当前页面。

' 打印当前页面
打印页面()
' 点击按钮触发打印
打印按钮.置被单击回调(() => {
	打印页面()
})

函数：移动窗口(X坐标,Y坐标)

将窗口的左上角移动到一个指定的坐标。代码示例：移动窗口(100, 100)

' 将窗口移动到屏幕坐标(100, 100)位置
移动窗口(100, 100)
' 将窗口移动到屏幕中心
移动窗口((取屏幕宽度()-取窗口宽度())/2, (取屏幕高度()-取窗口高度())/2)

函数：取选中对象()

返回表示用户选择的文本范围或光标的当前位置的对象。

' 获取用户选择的文本范围或光标当前位置
变量 选中内容 = 取选中对象()
调试输出(选中内容)

函数：BASE64解码(值)

解码使用 base64 编码的字符串。

' 解码Base64字符串
变量 密文 = "SGVsbG8gV29ybGQ="
变量 明文 = BASE64解码(密文)
调试输出("解码结果: " + 明文)  ' Hello World
' 解码Token获取用户信息
变量 Token = "eyJ1c2VyIjoiemhhbmdzYW4ifQ=="
变量 用户数据 = BASE64解码(Token)
调试输出("用户数据: " + 用户数据)

函数：BASE64编码(值)

用于创建一个 base64 编码的字符串。

' 编码字符串为Base64
变量 明文 = "Hello World"
变量 密文 = BASE64编码(明文)
调试输出("编码结果: " + 密文)  ' SGVsbG8gV29ybGQ=
' 编码用户信息生成简单Token
变量 用户信息 = "user=张三&role=admin"
变量 Token = BASE64编码(用户信息)
调试输出("Token: " + Token)

函数：关闭窗口()

关闭当前窗口。

' 关闭当前窗口
关闭窗口()
' 用户确认后关闭
变量 结果 = 确认框("确定要关闭窗口吗？")
如果(结果)
	关闭窗口()
结束 如果

函数：切换页面(页面名称,数据值)

切换当前窗口内容为指定页面的内容，参数二为需要传递的数据值，可省略。

' 切换页面时不传递数据，切换到"我的"页面
切换页面("我的")
' 切换页面时向目标窗口传递数据，注意传递的值只能为文本值且为键值对格式
切换页面("窗口1","key=1&value=data2")
' 传递多个参数
切换页面("详情页", "id=123&name=产品名称&type=电子")

函数：打开新窗口(页面名称)

在新窗口中打开指定页面；等效于：“window.open”函数，示例：打开新窗口("窗口1")。

' 在新窗口中打开"主页"
打开新窗口("主页")
' 在新窗口中打开指定页面并获取窗口对象
变量 新窗口 = 打开新窗口("详情页")
' 可以通过新窗口对象进行进一步操作

函数：添加CSS文件(地址)

添加并引入指定路径的 CSS 文件。代码示例：添加CSS文件("/static/css/style.css")

' 添加外部CSS文件
添加CSS文件("https://cdn.example.com/styles.css")
' 添加本地CSS文件
添加CSS文件("/static/css/style.css")

函数：添加字体文件(字体名称,字体文件地址,加载完毕回调函数,预设参数)

添加并引入指定字体文件到当前页面。

' 添加并使用自定义字体
添加字体文件("CustomFont", "/static/fonts/custom.woff2", ()=>{
	' 字体加载完成后的使用
	标签1.字体 = "CustomFont"
})
' 带预设参数的字体加载
添加字体文件("MyFont", "/static/fonts/myfont.woff2",()=>{
	' 字体加载完成后的使用
	标签1.字体 = "MyFont"
},{"style": "normal", "weight": "400"})

函数：置页面标题(新标题)

设置当前页面的标题。代码示例：置页面标题("我的应用 - 首页")

' 设置页面标题
置页面标题("我的应用 - 首页")
' 动态设置标题
置页面标题("用户中心 - " + 用户名)

函数：取页面标题()

获取当前页面的标题。

' 获取当前页面标题
变量 当前标题 = 取页面标题()
调试输出("页面标题: " + 当前标题)

函数：置页面图标(图标地址)

设置当前页面的图标。

' 设置页面图标
置页面图标("/static/images/logo.png")
' 动态切换页面图标（如夜间模式）
变量 当前主题 = 取缓存数据("theme")
如果(当前主题 == "dark")
	置页面图标("/static/images/logo-dark.png")
否则
	置页面图标("/static/images/logo-light.png")
结束 如果

函数：取页面图标()

获取当前页面的图标。

' 获取当前页面图标地址
变量 当前图标 = 取页面图标()
调试输出("当前图标: " + 当前图标)
' 检查图标是否已设置
如果(取页面图标() == "")
	置页面图标("/static/images/default.png")
结束 如果

函数：置页面背景色(颜色值)

设置当前页面背景颜色。

' 设置页面背景色
置页面背景色("#f0f0f0")
' 根据时间切换背景色
变量 当前小时 = 取时()
如果(当前小时 >= 6 且 当前小时 < 18)
	置页面背景色("#ffffff")  ' 白天白色背景
否则
	置页面背景色("#333333")  ' 夜晚深色背景
结束 如果

函数：取页面背景色()

获取当前页面背景颜色。

' 获取当前页面背景色
变量 当前背景色 = 取页面背景色()
调试输出("背景色: " + 当前背景色)
' 判断当前主题
如果(取页面背景色() == "#333333")
	调试输出("当前为夜间模式")
否则
	调试输出("当前为日间模式")
结束 如果

函数：取本窗口对象()

获取当前窗口（Window）对象。

变量 当前窗口 = 取本窗口对象()
调试输出(当前窗口)

函数：窗口已关闭()

获取并返回当前窗口是否已经被关闭。

变量 是否关闭 = 窗口已关闭()
调试输出("窗口已关闭: " + 是否关闭)

函数：取文档高度()

获取并返回窗口的文档显示区的高度。

变量 文档高度 = 取文档高度()
调试输出("文档高度: " + 文档高度 + "px")

函数：取文档宽度()

获取并返回窗口的文档显示区的宽度。

变量 文档宽度 = 取文档宽度()
调试输出("文档宽度: " + 文档宽度 + "px")

函数：取窗口框架数()

获取并返回窗口中的框架数量。

变量 框架数 = 取窗口框架数()
调试输出("框架数: " + 框架数)

函数：取窗口名称()

获取并返回窗口的名称。

变量 窗口名 = 取窗口名称()
调试输出("窗口名称: " + 窗口名)

函数：取窗口源引用()

获取并返回 创建此窗口的 来源窗口对象，通俗的讲：就是这个窗口是从那个窗口创建或切换过来的。

变量 来源窗口 = 取窗口源引用()
调试输出(来源窗口)

函数：取窗口高度()

获取并返回窗口的外部高度，包含工具条与滚动条。

变量 窗口高度 = 取窗口高度()
调试输出("窗口高度: " + 窗口高度 + "px")

函数：取窗口宽度()

获取并返回窗口的外部宽度，包含工具条与滚动条。

变量 窗口宽度 = 取窗口宽度()
调试输出("窗口宽度: " + 窗口宽度 + "px")

函数：取页面X偏移()

获取并返回当前页面相对于窗口显示区左上角的X位置。

变量 页面X偏移 = 取页面X偏移()
调试输出("X偏移: " + 页面X偏移)

函数：取页面Y偏移()

获取并返回当前页面相对于窗口显示区左上角的Y位置。

变量 页面Y偏移 = 取页面Y偏移()
调试输出("Y偏移: " + 页面Y偏移)

函数：取父窗口()

获取并返回父窗口。

变量 父窗口 = 取父窗口()
调试输出(父窗口)

函数：取窗口X坐标()

获取并返回相对于屏幕窗口的x坐标。

变量 窗口X坐标 = 取窗口X坐标()
调试输出("窗口X坐标: " + 窗口X坐标)

函数：取窗口Y坐标()

获取并返回相对于屏幕窗口的y坐标。

变量 窗口Y坐标 = 取窗口Y坐标()
调试输出("窗口Y坐标: " + 窗口Y坐标)

函数：取顶层父窗口()

获取并返回最顶层的父窗口。

变量 顶层窗口 = 取顶层父窗口()
调试输出(顶层窗口)

函数：置组件水平居中(...视图组件)

设置指定组件在页面中相对于页面宽度水平居中。代码示例：置组件水平居中(按钮1, 输入框1)

' 将单个组件水平居中
置组件水平居中(登录按钮)
' 将多个组件同时水平居中
置组件水平居中(按钮1, 输入框1, 标签1)

函数：置组件垂直居中(...视图组件)

设置指定组件在页面中相对于页面高度垂直居中。代码示例：置组件垂直居中(面板1)

' 将组件垂直居中
置组件垂直居中(主面板)
' 将多个组件垂直居中
置组件垂直居中(面板1, 面板2)

函数：置组件居中(...视图组件)

设置指定组件在页面中垂直水平居中。代码示例：置组件居中(对话框1)

' 将组件完全居中（水平+垂直）
置组件居中(登录对话框)					
' 将多个组件居中
置组件居中(面板1, 面板2)

函数：批量赋值(属性名称,目标值,...视图组件)

对指定对象的属性批量赋值，例如要同时设置多个可视组件的宽度或背景颜色。

' 批量设置组件宽度
批量赋值("宽度", "80%", 编辑框1, 编辑框2, 编辑框3)
' 批量设置组件背景颜色
批量赋值("背景颜色", "#f0f0f0", 面板1, 面板2, 面板3)
' 批量设置组件可见性
批量赋值("可视", "hidden", 组件1, 组件2, 组件3)

函数：置组件宽度(值,...视图组件)

设置指定组件的宽度值，参数二支持同时设置多个组件的宽度。代码示例：置组件宽度(300, 按钮1, 输入框1)

' 设置单个组件宽度
置组件宽度(200, 按钮1)
' 同时设置多个组件宽度
置组件宽度("50%", 面板1, 面板2)
' 使用不同单位设置宽度
置组件宽度("200px", 组件1)
置组件宽度("80%", 组件2)

函数：置组件高度(值,...视图组件)

设置指定组件的高度值，参数二支持同时设置多个组件的高度。代码示例：置组件高度(400, 面板1)

' 设置组件高度
置组件高度(300, 主面板)
' 同时设置多个组件高度
置组件高度("60vh", 面板1, 面板2)

函数：置组件顶边(值,...视图组件)

设置指定组件的顶边值，参数二支持同时设置多个组件的顶边。代码示例：置组件顶边(50, 面板1)

' 设置组件距离顶部的位置
置组件顶边(100, 弹窗1)
' 同时设置多个组件的顶边
置组件顶边(20, 标签1, 输入框1)

函数：置组件左边(值,...视图组件)

设置指定组件的左边值，参数二支持同时设置多个组件的左边。代码示例：置组件左边(100, 面板1)

' 设置组件距离左边的位置
置组件左边(50, 侧边栏)
' 同时设置多个组件的左边位置
置组件左边(10, 标签1, 输入框1)

函数：取请求参数()

获取从其它页面切换到本页面时，传递过来的参数值，返回一个参数值对象。

' 获取页面跳转时传递的参数，假设上一个窗口切换到本页面时传递的参数为 ?id=123&name=test
变量 参数值 = 取请求参数()
如果(参数值 != 空)
	变量 用户ID = 参数值["id"]
	变量 用户名 = 参数值["name"]
	' 使用参数值
	调试输出("用户名：" + 用户名 + "，用户ID：" + 用户ID)
结束 如果

学习要点

相关文档

• 文档前端(JavaScript)函数_URL地址操作类 —— 重载页面、取URL完整地址 URL操作函数
• 文档前端(JavaScript)函数_历史类 —— 后退页面、前进页面 浏览历史控制
• 文档前端(JavaScript)函数_浏览器操作类 —— 读COOKIE、写COOKIE Cookie操作
• 文档前端(JavaScript)函数_屏幕操作类 —— 取屏幕宽度、取屏幕高度 屏幕信息获取
• 文档前端(JavaScript)函数_文档操作 —— 查找元素ByID 等DOM操作函数
• 文档前端(JavaScript)函数_时间类 —— 取时、取年 等时间函数，配合定时切换背景