location 和 history

Location 对象:封装了浏览器地址栏的 URL 信息

一、hash

返回 URL 中 hash(#后跟零个或者多个字符), 如果不包含, 返回空字符串
# 位置标识符 : 当前页面的位置信息, 比如: 跳转顶部

console.log(location.hash); // ""

二、host : 返回服务器名称和端口号

console.log(location.host); // "localhost:63342"

三、hostname : 返回不带端口号的服务器名称

console.log(location.hostname); // localhost

四、href: 返回当前价在页面的完整 URL

console.log(location.href); // http://localhost:63342/htmlcss/22_javascript%E5%9F%BA%E7%A1%80/day_12_ES6/03_BOM%E6%93%8D%E4%BD%9C/02_location%E5%AF%B9%E8%B1%A1.html?_ijt=hiop2dovhunhqnn2udlbo9ncbulocation.href = 'www.baidu.com'; // 跳转到其他页面

如果直接将 location.href 属性修改为一个绝对路径(或相对路径),则页面会自动跳转到该路径,并生成相应的历史记录

五、pathname : 返回 URL 中的 目录 和 文件名

console.log(location.pathname); // /htmlcss/22_javascript%E5%9F%BA%E7%A1%80/day_12_ES6/03_BOM%E6%93%8D%E4%BD%9C/02_location%E5%AF%B9%E8%B1%A1.htmlAndCss

六、port : 返回 URL 中执行的端口号

如果 URL 中不包含端口号, 则返回空字符串

console.log(location.port); // 63342

七、protocol : 返回页面使用的协议, 通常指的是 http / https

console.log(location.protocol); // http:

八、search : 返回 URL 的查询字符串, 这个字符串以 ? 开头

console.log(location.search); // ?_ijt=hiop2dovhunhqnn2udlbo9ncbu
Location 对象的方法

一、location.reload()刷新页面

location.reload(); // 重新加载当前页面location.reload(true); // 在方法中传递一个 true,则会强制清空缓存刷新页面

二、location.assign(str)跳转页面

location.assign('www.baidu.com'); // 作用和直接修改 location.href 一样。

三、location.replcace()替换当前页面

location.replace('http://www.baidu.com');

使用一个新的页面替换当前的页面,调用完毕也会跳转页面。但不会生成历史纪录,不能使用(后退按钮)后退。

四、encodeURI('')中文 - URI编码

console.log('恰饭'); // %E6%81%B0%E9%A5%AD

五、decodeURI('')URI编码 - 中文

console.log('%E6%81%B0%E9%A5%AD'); // 恰饭
History 对象

history 对象:可以用来操作浏览器的向前或向后翻页。

history.length;

获取浏览器历史列表中的 url 数量。注意,只是统计当次的数量,如果浏览器关了,数量会重置为 1

history.back(); – 用来回退到上一个页面,作用和浏览器的[回退按钮]一样。
history.forward(); – 用来跳转下一个页面,作用和浏览器的[前进按钮]一样。
history.go(); – 向前 / 向后跳转 n 个页面。

history.go(1); // 向前跳转一个页面,相当于 history.forword()
history.go(2); // 向前跳转两个页面
history.go(0); // 刷新当前页面
history.go(-1); // 向后跳转一个页面,相当于 history.back()
history.go(-2); // 向后跳两个页面

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/556115.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ble芯片 全称_蓝牙芯片都有哪些厂商?一文解答

蓝牙5新标准是蓝牙技术自1999年诞生以来推出的第十个标准版本。其性能上大幅提升,可归结为:更快、更长、更给力,非常适合运用于无线可穿戴、工业和智能家居等领域。但蓝牙技术产品能否真正进人批量生产在于芯片制造技术能否跟得上&#xff0c…

你知道Java中final和static修饰的变量是在什么时候赋值的吗?

开始 一位朋友在群里问了这样一个问题: 本着乐于助人的想法,我当时给出的回答: 后来我总觉得哪里不对劲,仔细翻阅了《Java虚拟机规范》和《深入理解Java虚拟机》这一部分的内容,害!发现自己理解的有问题。…

获取元素大小和位置的方式

一、直接获取元素样式属性值 – element.style.width console.log(div.style.width); // 500px console.log(parseInt(div.style.width)); // 500 console.log(typeof (div.style.width)); // string二、Offset 偏移量 offsetWidth width padding border offsetHeight he…

mybatis 取查询值_MyBatis-SELECT基本查询

1、返回一个LISTselect * from tbl_employee where last_name like #{lastName}2、将查询记录封装为一个Mapselect * from tbl_employee where id#{id}返回一条记录的map;key就是列名,值就是对应的值。3、多条记录封装为一个mapMapKey("id")pu…

ES6 里面的 class

ES5 对象的写法 let x 10,y 20;const obj {x: x,y: y,sum: function () {return this.x this.y;} };ES6 对象的写法 const obj {x,y,sum() {return this.x this.y;} };class 有点类似 java 的 class class Person { // 类名大写// 私有属性和方法 写在 construtor 里面…

normalize函数_Pandas 数据处理(一) —— 几个简单函数掌握!

对于 Pandas, 接触过 Python 数据处理的小伙伴们都应该挺熟悉的,做数据处理不可或缺的一个程序包,最大的特点高效,本篇文章将通过案例介绍一下 Pandas 的一些基础使用!1,读入数据大部分数据都可以用 read_c…

Java Collections.emptyList() 方法的使用及注意事项

Java Collections.emptyList方法的使用及注意事项 一、emptyList() 作用:返回一个空的List(使用前提是不会再对返回的list进行增加和删除操作);好处: 1. new ArrayList()创建时有初始大小,占用内存&#…

git 生成多个patch_详解如何使用git 生成patch 和打入patch

平时我们在使用git 管理项目的时候,会遇到这样一种情况,那就是客户使用git 生成patch 给到我们,那我们就需要把客户给到patch 打入到我们的project ,基于这样一个场景,我把git 如何生成patch 和如何打入patch 做总结生…

Java集合工具类的一些坑,Arrays.asList()、Collection.toArray()...

Arrays.asList() 使用指南 最近使用Arrays.asList()遇到了一些坑,然后在网上看到这篇文章:Java Array to List Examples 感觉挺不错的,但是还不是特别全面。所以,自己对于这块小知识点进行了简单的总结。 简介 Arrays.asList()…

python saltstack web_saltstack学习-8:web管理页面(halite)

安装halite方法一:失败,待查原因1、安装并启动salt-api yuminstall salt-api –yservice salt-api startchkconfig salt-api on2、安装halite及其依赖文件 yuminstall python-pip –ypipinstall --upgrade pippipinstall -U halitepipinstall cherrypypi…

什么是 NIO? NIO 和 BIO、AIO 之间的区别是什么?NIO主要用来解决什么问题?

1 BIO,NIO,AIO都有什么区别,NIO的原理是什么? BIO BIO:传统的网络通讯模型,就是BIO,同步阻塞IO, 其实就是服务端创建一个ServerSocket, 然后就是客户端用一个Socket去连…

关于页面配色

一、互补色 当两个颜色恰好在色环的两端时,这两个颜色叫做补色。补色搭配能形成强列的对比效果 在线配色工具地址 文字背景色和文字颜色互为补色,文字会很难看清,那么就只使用一种颜色作为主要颜色,其补色用来装点页面 比如&…

axure命令行_Axure变量详解

以前使用Axure只是停留在元件的布局和简单交互事件的设置,使用得非常肤浅,直到现在有时间静下心来重学Axure,才发现函数和变量的牛逼之处。以前在做较复杂交互时,为了实现一个效果吭哧吭哧写了一串命令,而往往函数和变…

一次性说清楚秒验(本机号码一键登录)基本原理、优势、场景、交互过程和常见的问题

一、 关于秒验(一键登录)基本原理 秒验(一键登录)产品整合了三大运营商特有的数据网关认证能力,升级短信验证码体验,应用于用户注册、登陆、支付、安全校验等场景,可实现用户无感知校验&#x…

php 基本语法

一、php 基本语法 <?php // echo | print 两种输出语句 echo 任何位置; print 任何位置; ?>二、注释 <?php // echo 任何位置; // 单行注释 /*多行注释*/ ?>三、变量声明 变量名以 $ 开始&#xff0c;后面跟变量的名字&#xff0c;区分大小写 <?php $x …

爬虫python能做游戏吗_一入爬虫深似海,从此游戏是路人!总结我的python爬虫学习笔记!...

1、基本抓取网页get方法post方法2、使用代理IP在开发爬虫过程中经常会遇到IP被封掉的情况&#xff0c;这时就需要用到代理IP&#xff1b;在urllib2包中有ProxyHandler类&#xff0c;通过此类可以设置代理访问网页&#xff0c;如下代码片段&#xff1a;3、Cookies处理cookies是某…

三大运营商实现本机号码一键登录原理与应用

很多APP的目前都支持“本机号码一键登录”功能。本机号码一键登录是基于运营商独有网关认证能力推出的账号认证产品。用户只需一键授权&#xff0c;即可实现以本机号码注册/登录&#xff0c;相比先前的短信验证码流程体验更优。 目前市面上有很多厂商提供三网验证的服务&#…

php 数据类型

七种数据类型&#xff1a; String / Integer / Float / Boolean / Array / Object / null 检测变量的数据类型和值 var_dump() 一、字符串 $x abc; var_dump($x); echo $x; // string abc二、整形 $x 1234; var_dump($x); echo $x; // int 1234三、浮点型 $x 1.1; var_d…

部署到gcp_剖析大数据公司为什么选择 GCP?

文章来源&#xff1a;加米谷大数据假如L 是一家大数据公司。下面我们的文章将围绕L展开分析。很多公司拥有大数据。每天早餐之前&#xff0c;健壮的日志框架就已经生成了 PB 级别的日志&#xff0c;并以防万一将这些数据长期保存在了亚马逊的 S3 上。还有一些公司会使用他们自己…

Redis缓存那点破事 , 绝杀面试官 25 问

转载&#xff1a;https://blog.csdn.net/itomge/article/details/122118060 精彩文章汇总 GitHub https://github.com/aalansehaiyang/technology-talk &#xff0c;Star 12K &#xff0c;汇总java生态圈常用技术框架、开源中间件&#xff0c;系统架构、数据库、大公司架构案例…