如何解决添加带有 URL 元素的动态内容
我有一个问题，我想知道这是否可能。我想通过更改 URL 中的 id 将动态内容添加到 html 页面中。
起初我的页面是：www.mypage.com/index
<p> Hello <span></span> welcome to our page</p>
我想要得到的结果是通过编写这个 url：www.mypage.com/index#YourName 代码将自身更新为：
<p> Hello <span id="YourName">YourName</span> welcome to our page</p>
所以通过修改 URL 来更新 id 和 span 的内容 juste。我真的不知道如何实现这一目标。我想知道是否可以通过在 url 上键入来动态地为我的 span 提供一个 id，然后检索这个 id 并将其用作 span 的值。
解决方法
您可以使用 window.location.hash 从 url 获取 ID 值。
此外，您可以使用 hashchange 窗口事件观察这些变化。
function showHash() {
const newHash = window.location.hash.replace("#","");
const resultSpan = document.querySelector(".hash-value");
resultSpan.id = newHash;
resultSpan.innerHTML = newHash;
}
window.addEventListener("hashchange",showHash,false);
window.addEventListener("DOMContentLoaded",showHash);<body>
<div>Current HASH in URL is: <span class="hash-value"></span></div>
<div class="buttons">
<a href="#hash1">hash1</a>
<a href="#hash2">hash2</a>
<a href="#hash3">hash3</a>
</div>
</body>您可以使用 JavaScript 获取当前链接，例如：
<script>
let YourLink = window.location.href;
let startingPoint = YourLink.indexOf('#');
let endingPoint = YourLink.indexOf('/'); // In case if the name is not the last thing on your link
let NameYouWant = YourLink.substring(startingPoint,endingPoint);
// So 'NameYouWant' would be the name you need to use
</script>
如果您使用“#”作为链接中每个名称的起点，希望对您有所帮助。
,也许你可以试试这个
let splits = window.location.href.split("#");
let span = document.getElementsByTagName("p")[0].getElementsByTagName("span")[0];
span.innerText = splits[splits.length - 1];
span.id = splits[splits.length - 1];
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。