我正在使用Vanilla Javascript,
我有两个页面,page01.html
和page02.html
这些页面共享相同的导航系统。
我想将参数加载到page01
的URL中,然后在导航上单击page02
后,page02
将在其URL中加载该参数。
示例:
page01.html
上没有使用localStorage和sessionStorage的方法吗?
这是使用原始JavaScript的简单解决方案:
Page01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>Page 1</div>
<a href="page02.html">go to page 2</a>
<script>
var linkToPage2 = document.querySelector("a[href='page02.html']");
linkToPage2.addEventListener("click", function(e){
e.preventDefault();
if(location.search){
window.location.href = "page02.html" + location.search;
}
});
</script>
</body>
</html>
Page02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>Page 2</div>
<a href="page01.html">go to page 1</a>
<script>
var linkToPage1 = document.querySelector("a[href='page01.html']");
linkToPage1.addEventListener("click", function(e){
e.preventDefault();
if(location.search){
window.location.href = "page01.html" + location.search;
}
});
</script>
</body>
</html>
我同时使用了Bergi的评论和Henry的回答来创建自己的版本。
基本上,我只是在标签上创建了onclick="menuClick();"
和id="menuLink"
。然后在Javascript上,我刚刚将location.search
添加到了href:
menuClick = function() {
document.getElementById('menuLink').href += location.search
}