时间戳

首页 > 解决方案 > 如何在通过 JavaScript 加载时更改另一个页面上的 ID

javascript - 如何在通过 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？

标签： javascripthtml

解决方案

简短的回答：有几种方法，如果您正在处理同源页面，更容易想到的是使用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"

推荐阅读