阅读 220

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二十八)

小知识,大挑战!本文正在参与「程序员必备小知识」创作活动

本文已参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金。

感激相遇 你好 我是阿ken

作者:请叫我阿ken
链接:juejin.cn/user/109118…
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

🌊🌈关于前言:

文章部分内容及图片出自网络,如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容:

下述内容所属本专栏系列-第八部分 BOM

8.5.3 [ 案例 ] 获取 URL 参数

在实现登录功能时。需要在登录页面( login.html )进行表单提交。如果用户输入正确,则提交到 index.html 首页,并且需要把输人的用户名传递过去,这样首页中就可以获取并使用该用户名。了解了产品需求之后,接下来我们开始编写业务逻辑代码。

  • (1) 创建 login.html 登录页面,搭建表单结构,示例代码如下:
<form actlon="index html">
用户名: 
<input type="text" name="uname">
<input type="submit" value="登录">
</form>
复制代码

上述代码中,使用 action 属性把表单提交到 index.html 页面。第4行 input 表单元素 type 属性设置为 " submit " ,表示当单击 " 登录 " 按钮时,表单自动提交。

  • (2) 创建 index.html 首页,示例代码如下:
<body>

<div></div>
<!-- div 元素用于展示从 login.html 页面传递过来的参数。-->

<script>
console.log (location, search);
// 结果为: ?uname=andy
// 使用 location.search 返回 URL 地址中的参数。

// 1.去掉search中的问号"?"
var params = location.search.substr(1);
console.log (params);
// 结果为: uname=andy
// 用来去掉字符串中第1个字符,也就是把参数字符串最前面的问号“?"去掉。

// 2.把字符串分割为数组
var arr = params.split('=');
console.log (arr);
// 结果为: ["uname", "andy"]
var div = document.querySelector('div');
// 利用 split() 方法把字符串分隔成数组。

// 3.把数据写人div中
div.innerHTML = arr[i] + '欢迎您';
// 为使用 innerHTML 把数据写人 div 中。
</script>

</body>
复制代码

8.5.4 location 的常用方法

location 对象提供的用于改变 URL 地址的方法,所有主流的浏览器都支持,

location 对象的方法

方法说明
assign()载人一个新的文档
reload()重新加载当前文档
replace()用新的文档替换当前文档,覆盖浏览器当前记录

在上述表中,assign() 方法是比较常用的方式,使用 location.assign() 就可以立即打开一个新的浏览器位置,并生成一条新的历史记录。接收的参数为 URL 地址。

reload() 方法的唯一参数, 是一个布尔类型值,将其设置为 true 时,它会绕过缓存,从服务器上重新下载该文档,类似于浏览器中的 " 刷新页面 " 按钮。

replace() 方法的作用就是使浏览器位置发生改变,并且禁止在浏览器历史记录中生成新的记录,它只接受一个要导航到的 URL 参数,而且在调用 replace() 方法后,用户不能返回到前一个页面。

8.6 navigator 对象

navigator 对象包含有关浏览器的信息,但是每个浏览器中的 navigator 对象中都有一套自己的属性和方法,

navigator 对象的属性和方法

分类名称说明
属性appCodeName返回浏览器的内部名称
属性appName返回浏览器览器的完整名称
属性appVersion返回浏览器的平台和版本信息
属性cookieEnabled返回指明浏览器中是否启用 Conkie 的布尔值
属性platform返回运行浏览器的操作系统平台
属性userAgent返回由客户端发送到服务器的 User-Agent 头部的值
方法javaEnabled()指定是否在浏览器中启用 Java

在上表中,最常用的属性是 userAgent,

案例:演示 userAgent 的使用,

<script>
var msg = window.navigator.userAgent;
console.log (msg);
</script>
复制代码

上述代码中,使用 window.navigator 来返回不同容户端发送到服务器的 Uset-Agent 头部的值。以 Chorme. Firefox、IE 浏览器为例,输人结果如下。

  • ( 1 ) Chrome
Mozilla/5.0 (windows NT 6.1; win64; x64) AppleWebkit/537.36 (KHTML, like Gecko)Chrome/77.0.3865.75 Safari/537.36
复制代码

(2) Firefox

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0
复制代码
  • ( 3 ) IE
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2;.NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0;.NET4.0C; .NET4.0E; InfoPath.3)
复制代码

8.7 history 对象

BOM 中提供的 history 对象,可以对用户在浏览器中访问过的 URL 历史记录进行操作。出于安全方面的考虑,history 对象不能直接获取用户浏览过的 URL ,但可以控制浏览器实现 " 后退 " 和 " 前进 " 的功能。

history 对象的属性和方法

分类名称说明
属性length返回历史列表中的网址数
方法back()加载 history 列表中的前一个 URL
方法forward()加载 history 列表中的下一个 URL
方法go()加载 history 列表中的某个具体页面

go() 方法可根据参数的不同设置,完成历史记录的任意跳转。当参数值是一个负整数时,表示后退 " 后退 " 指定的页数;当参数值是一个正整数时,表示 " 前进 " 指定的页数。

🌊🌈往期回顾:

HTML入门指南学习专栏「已完结」:

阿ken的HTML、CSS的入门指南(一)_HTML基础
阿ken的HTML、CSS的入门指南(二)_HTML页面元素和属性
阿ken的HTML、CSS的入门指南(三)_文本样式属性
阿ken的HTML、CSS的入门指南(四)_CSS3选择器
阿ken的HTML、CSS的入门指南(五)_CSS盒子模型
阿ken的HTML、CSS的入门指南(六)_CSS盒子模型
阿ken的HTML、CSS的入门指南(七)_CSS盒子模型
阿ken的HTML、CSS的入门指南(八)_CSS盒子模型
阿ken的HTML、CSS的入门指南(九)_浮动与定位
阿ken的HTML、CSS的入门指南(十)_浮动与定位
阿ken的HTML、CSS的入门指南(十一)_浮动与定位
阿ken的HTML、CSS的入门指南(十二)_表单的应用
阿ken的HTML、CSS的入门指南(十三)_表单的应用
阿ken的HTML、CSS的入门指南(十四)_表单的应用
阿ken的HTML、CSS的入门指南(十五)_表单的应用
阿ken的HTML、CSS的入门指南(十六)_多媒体技术
阿ken的HTML、CSS的入门指南(十七)_多媒体技术
挑战最短时间带你走进HTML(十八)
挑战最短时间带你走进HTML(十九)
挑战最短时间带你走进HTML(二十)


 Javascript入门指南学习专栏「更新中」:

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(一)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(三)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(四)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(五)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(六)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(七)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(八)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(九)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十一)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十二)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十三)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十四)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十五)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十六)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十七)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十八)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十九)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二十)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二十一)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二十二)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二十三)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二十四)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二十五)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二十六)

🌊🌈关于后记:

感激相遇 你好 我是阿ken
个人微信:wlpchaojibang 有问题请随时与我交流,一个人可以走的很快,但一群人才可以走的更远!

「关注」:提高学习效率!

👍🏻:原创不易,适当鼓励!

⭐:收藏文章,温故知新!

💬:评论交流,共同进步!

文章分类
前端
文章标签