码迷,mamicode.com
首页 > Web开发 > 详细

js-url操作记录

时间:2019-10-02 16:58:02      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:regexp   nav   gate   操作记录   协议   list   hash   navig   按钮   

禁用回退&开启回退

// 必须声明方法 否则无法删除此监听器
function backCommon() {
	history.pushState(null, null, document.URL);
}

// 禁用浏览器回退页面操作
history.pushState(null, null, document.URL);
window.addEventListener(‘popstate‘, backCommon);

// 开启浏览器回退页面操作
window.removeEventListener(‘popstate‘, backCommon);
window.location.href = "/word/show";

  

 

禁用回退&无法开启回退

// 如果你希望用户不用有返回功能 可缩写如下 或使用location.replace(‘url‘)跳转链接
history.pushState(null, null, document.URL);
window.addEventListener(‘popstate‘, function () {
	history.pushState(null, null, document.URL);
});

  

 

url常用方法

// 获取整个url或跳转url
window.location.href;

// 设置或获取url问号后参数
window.location.search;

// 设置或获取href属性中在井号后的值
window.location.hash;

// 设置或获取url的协议
window.location.protocol;

// 设置或获取url的hostname localhost/user?id=1返回‘/user‘
window.location.hostname;

// 设置或获取url端口号
window.location.port;

  

 

js常用返回方法

// 返回上页
history.go(-1);
// 返回上上页
history.go(-2);
// 返回上页 有人说back返回会刷新上个页面但我的操作过程中页面并没有刷新
history.back();
// 返回上页
history.back(-1);

// 返回下一页
history.go(1);
// 返回下一页
history.forward();
// 产生点击前进按钮的效果 抵消用户点击后退按钮所产生事件
istory.forward(1);

  

 

刷新页面

history.go(0);

location.reload();

location = location;

// 加载新页面可以url可以前进后退
location.href = location.href;
// 加载新页面可以url可以前进后退 等同如上操作
location.assign(location);
// 替换当前页 清除url历史记录 无法前进后退
location.replace(‘http://www.baidu.com‘)
// 此方法可以使当前页面失去前进后退功能
location.replace(this.href);
location.replace(location);

document.execCommand(‘Refresh‘);

window.navigate(location);

document.URL = location.href;

  

 

js获取url中的参数

function geUrltParam(paramKay) {
	let reg = new RegExp("(^|&)" + paramKay + "=([^&]*)(&|$)", "i");
	let r = location.search.substr(1).match(reg);
	return r == null ? null : decodeURI(r[2]);
}

// localhost:8080/index?openId=xxxx
var openId = getQueryString("openId");

  

js-url操作记录

标签:regexp   nav   gate   操作记录   协议   list   hash   navig   按钮   

原文地址:https://www.cnblogs.com/liuqingxia/p/11617564.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!