如何在另一个页面通过JavaScript加载时更改Id

我想让用户点击一个按钮，导致另一个页面。根据用户单击的按钮，页面内容应该看起来不同，尽管在同一页面上。下面是一个简化的示例:

起始页html代码:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="second-page.html" onclick="changeContent('Option One')">Click Here</a>
<a href="second-page.html" onclick="changeContent('Option Two')">Click Here</a>
<script src="script.js"></script>
</body>
</html>

second-page.html代码:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="content-id">*CONTENT SHOULD BE LOADED HERE BASED OFF BUTTON CLICKED*</p>
<script src="script.js"></script>
</body>
</html>

script.js代码:

function changeContent(n) {
document.getElementById("content-id").innerHTML = n;
}

上面的代码不起作用。我猜浏览器没有看到第一页上的content-id，并且在加载第二页之前没有更改任何内容。当加载新页面时，使用JavaScript(没有jQuery)在正确的页面上引用正确的id有什么方法?

简短的回答:有几种方法，如果您正在处理相同的原始页面，那么最容易想到的是使用localStorage

您需要的是在多个页面上提供用户信息。因此，与sessionStorage不同，localStorage允许跨浏览器会话存储和保存数据:

localStorage类似于sessionStorage，除了localStorage数据没有过期时间，sessionStorage数据在页面会话结束时被清除-即当页面关闭时。

要使用它，请考虑调整您的javascript的第一页:

function changeContent(n) {
localStorage.setItem('optionChosen', n);
}

然后在第二页的javascript中检索。

var opt = localStorage.getItem('optionChosen')
var content = document.querySelector('#content-id')
if (opt == null) console.log("Option null")

if (opt === 'Option One') content.innerText = "Foo"
if (opt === 'Option Two') content.innerText = "Bar"

已编辑-

新增3个可复制粘贴的工作示例

问题——

显示新视图上的内容，基于点击按钮进入该视图。

方法——

您可以将ID的值存储在浏览器中，以帮助确定应该以多种方式显示的内容。我将向您展示三个工作示例。

笔记——

由于我不知道您正在工作的确切情况，因此我稍微复杂化了一点，以向您展示如何使其工作。您应该能够使用这个逻辑来根据您的需求进行重构。你会发现以下3种解决方案。

1。使用GET参数

使用URL中的GET参数来帮助您跟踪视图中的必要更改。

2。使用会话存储

只要浏览器是打开的，页面会话就会持续，并且在页面重新加载和恢复期间持续存在。
在新选项卡或窗口中打开一个页面会创建一个带有顶级浏览上下文值的新会话，这与会话cookie的工作方式不同。
使用相同的URL打开多个选项卡/窗口为每个选项卡/窗口创建sessionStorage。
关闭选项卡/窗口结束会话并清除sessionStorage中的对象。

3。使用本地存储

localStorage和sessionStorage之间的区别是数据持续的时间。LocalStorage跨越多个窗口，持续时间超过当前会话。
内存容量可能因浏览器而改变。

解决方案——

工作示例-(将下面的任何解决方案复制粘贴到HTML文件中，它们将在您的浏览器中工作。)

使用GET参数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<script type="text/javascript">
let currentURL = window.location.href.split("?")[0];
function appendParams(val) {
if (val === "a") {
window.location.assign(currentURL + "?id=a");
}
if (val === "b") {
window.location.assign(currentURL + "?id=b");
}
}
</script>
<title>Working Example</title>
</head>
<body>
<button onclick="appendParams('a')">Click Here</button>
<button onclick="appendParams('b')">Click Here</button>
<p id="replace-id"></p>
</body>
</html>
<script type="text/javascript">
let url_str = window.location.href;
let url = new URL(url_str);
let search_params = url.searchParams;
let id = search_params.get("id");
document.getElementById("replace-id").id = id;
let ContentOne = "Some text if id is A";
let ContentTwo = "Some text if id is B";
if (id === "a") {
document.getElementById("a").innerHTML = ContentOne;
}
if (id === "b") {
document.getElementById("b").innerHTML = ContentTwo;
}
</script>

使用会话存储

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<script type="text/javascript">
sessionStorage.setItem("id", "default");
function addSessionStorage(val) {
sessionStorage.setItem("id", val);
updateContent();
}
function updateContent() {
let id = sessionStorage.getItem("id");
let ContentOne = "Some text if id is A";
let ContentTwo = "Some text if id is B";
if (id === "a") {
document.getElementById("replace-content").innerHTML =
ContentOne;
}
if (id === "b") {
document.getElementById("replace-content").innerHTML =
ContentTwo;
}
}
</script>
<title>Working Example</title>
</head>
<body>
<button onclick="addSessionStorage('a')">Click Here</button>
<button onclick="addSessionStorage('b')">Click Here</button>
<p id="replace-content">Default Content</p>
</body>
</html>

使用本地存储

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<script type="text/javascript">
localStorage.setItem("id", "default");
function addLocalStorage(val) {
localStorage.setItem("id", val);
updateContent();
}
function updateContent() {
let id = localStorage.getItem("id");
let ContentOne = "Some text if id is A";
let ContentTwo = "Some text if id is B";
if (id === "a") {
document.getElementById("replace-content").innerHTML =
ContentOne;
}
if (id === "b") {
document.getElementById("replace-content").innerHTML =
ContentTwo;
}
}
</script>
<title>Working Example</title>
</head>
<body>
<button onclick="addLocalStorage('a')">Click Here</button>
<button onclick="addLocalStorage('b')">Click Here</button>
<p id="replace-content">Default Content</p>
</body>
</html>

相关内容

最新更新

热门标签：