前端(JavaScript)函数_URL地址操作类

文档概述

轻语言网站开发中的URL地址操作函数、用于处理浏览器地址栏的URL信息,包含获取URL参数、设置URL、解析地址信息、处理查询字符串等功能,常用于页面路由、参数传递、URL解析等场景。

  • URL结构分解协议://主机名:端口/路径名?查询部分#锚部分,可分别用 取URL协议/取URL主机名/取URL端口/取URL路径名/取URL查询部分/取URL地址锚 获取
  • 页面控制重载页面 用于刷新当前页面,常用于数据更新后强制刷新

💡 URL 解析对照:以 https://www.example.com:8080/news/list?id=10&cat=tech#article 为例,取URL协议→"https:"、取URL主机名→"www.example.com"、取URL端口→"8080"、取URL路径名→"/news/list"、取URL查询部分→"?id=10&cat=tech"、取URL地址锚→"#article"。

函数:取URL地址锚()

获取当前 URL 的锚部分(从 # 号开始的部分)。

' 获取页面锚点(常用于单页应用路由)
变量 锚 = 取URL地址锚()
调试输出("锚部分: " + 锚)  ' 如:#article

' 根据锚点加载对应内容
变量 锚点 = 取URL地址锚()
如果(锚点 == "#用户列表")
	加载用户列表()
否则 如果(锚点 == "#商品列表")
	加载商品列表()
结束 如果

函数:取URL主机名及端口()

获取当前 URL 的主机名和端口。

变量 主机及端口 = 取URL主机名及端口()
调试输出("主机及端口: " + 主机及端口)  ' 如:www.example.com:8080

' 区分开发环境与生产环境
变量 当前主机 = 取URL主机名及端口()
如果(当前主机 == "localhost:8080")
	调试输出("当前为开发环境")
否则
	调试输出("当前为生产环境")
结束 如果

函数:取URL主机名()

获取当前 URL 的主机名。

变量 主机名 = 取URL主机名()
调试输出("主机名: " + 主机名)  ' 如:www.example.com

' 根据域名切换配置
变量 域名 = 取URL主机名()
如果(域名 == "api.test.com")
	调试输出("使用测试API")
否则 如果(域名 == "api.prod.com")
	调试输出("使用生产API")
结束 如果

函数:取URL完整地址()

获取当前完整的 URL。

变量 完整地址 = 取URL完整地址()
调试输出("完整URL: " + 完整地址)

' 分享当前页面地址
变量 当前页面 = 取URL完整地址()
复制文本(当前页面)
弹出提示("页面地址已复制,可分享给好友")

函数:取URL路径名()

获取当前 URL 的路径名。

变量 路径名 = 取URL路径名()
调试输出("路径名: " + 路径名)  ' 如:/news/list

' 根据路径高亮导航菜单
变量 路径 = 取URL路径名()
如果(寻找文本(路径, "news") != -1)
	新闻菜单.添加样式("active")
结束 如果

函数:取URL端口()

获取当前 URL 服务器使用的端口号。

变量 端口 = 取URL端口()
调试输出("端口: " + 端口)  ' 如:8080

' 根据端口判断环境
变量 当前端口 = 取URL端口()
如果(当前端口 == "443" 或 当前端口 == "")
	调试输出("使用HTTPS默认端口")
结束 如果

函数:取URL协议()

获取当前 URL 的协议。

变量 协议 = 取URL协议()
调试输出("协议: " + 协议)  ' 如:https:

' 强制HTTPS跳转
变量 当前协议 = 取URL协议()
如果(当前协议 == "http:")
	切换页面("https://" + 取URL主机名() + 取URL路径名())
结束 如果

函数:取URL查询部分()

获取当前 URL 的查询部分(从 ? 号开始的部分)。

变量 查询部分 = 取URL查询部分()
调试输出("查询部分: " + 查询部分)  ' 如:?id=10&cat=tech

' 提取查询参数值需配合 字符串操作 函数
变量 查询 = 取URL查询部分()
变量 起始 = 寻找文本(查询, "id=") + 3
变量 结束 = 寻找文本(查询, "&", 起始)
调试输出("id值: " + 取文本中间(查询, 起始, 结束))

函数:重载页面()

重新加载当前页面。

' 重新加载当前页面
重载页面()

' 点击刷新按钮时重新加载
刷新按钮.置被单击回调(() => {
	重载页面()
})

' 数据更新后提示并刷新
保存按钮.置被单击回调(() => {
	弹出提示("保存成功,正在刷新")
	重载页面()
})

学习要点

知识点代码示例说明
完整地址获取取URL完整地址()获取完整 URL,用于分享、复制
路径名判断取URL路径名()获取路径部分,用于导航高亮、页面判断
查询字符串取URL查询部分()返回 ? 后内容,需配合 寻找文本/取文本中间 提取参数
锚点路由取URL地址锚()返回 # 后内容,单页应用常用锚点做前端路由
协议判断取URL协议()返回如 "https:",用于强制 HTTPS 跳转
主机名区分取URL主机名()根据域名切换开发/生产环境配置
页面刷新重载页面()重新加载当前页面,清空临时数据,常用于数据更新后
URL解析组合协议+主机名+路径+查询+锚完整URL由各部分组成,可分别获取再拼接

相关文档

  • 文档前端(JavaScript)函数_字符串操作 —— 寻找文本取文本中间 等用于解析URL查询字符串
  • 文档前端(JavaScript)函数_历史类 —— 前进页面后退页面 浏览历史控制
  • 文档前端(JavaScript)函数_浏览器操作类 —— 切换页面弹出提示 浏览器操作函数
  • 文档前端(JavaScript)函数_数据转换类 —— URL编码URL解码 网址编码函数
  • 文档前端(JavaScript)函数_储存类 —— 保存配置 存储当前URL参数