window.location处理URL中的Hash部分

背景

• 有一个网页URL，其中包含Hash部分（例如：https://example.com/page#section1）。
• 需要根据URL中的Hash部分来设置页面上的不同内容或标题。

问题

• 原始的JavaScript代码尝试通过window.location.href来检查URL，但这不包括Hash部分。
• 需要一种方法来检查Hash部分并据此设置页面的相应内容。

解决方案

1. 使用window.location.hash

   • window.location.hash返回URL中的Hash部分（包括#）。
   • 可以使用startsWith()、includes()或其他字符串方法来检查Hash部分是否符合预期。

2. 设置页面内容

   • 根据Hash部分的内容，更新页面上的标题、显示区域或其他元素。
   • 如果Hash部分是#section1，则显示“第一部分”的内容。
   • 如果不包含#section1，或者需要其他默认情况，则显示默认内容或“首页”内容。

3. 确保DOM已加载

   • 使用window.onload事件来确保在DOM完全加载后再执行设置内容的函数。

示例代码 1

const setupPageContent = () => {  
    // 检查Hash部分  
    const hash = window.location.hash;  
    if (hash.startsWith('#section1')) {  
        // 假设有一个div元素用于显示第一节的内容  
        document.getElementById('section1Content').style.display = 'block';  
        // 可能还需要设置标题或其他元素  
        document.getElementById('pageTitle').textContent = '第一部分';  
    } else {  
        // 显示默认内容或首页内容  
        document.getElementById('defaultContent').style.display = 'block';  
        document.getElementById('pageTitle').textContent = '首页';  
        // 隐藏第一节的内容（如果之前显示了的话）  
        document.getElementById('section1Content').style.display = 'none';  
    }  
}  
  
// 当页面加载完成时调用函数  
window.onload = setupPageContent;

示例代码 2

const setupPageContent = () => {  
    // 检查Hash部分是否包含'section1'  
    if (window.location.hash.includes('section1')) {  
        // 假设有一个DOM元素或变量来接收这个标题  
        // 例如，如果mainTitle是一个input元素，可以这样设置：  
        // document.getElementById('pageTitle').value = "首页";  
        // 或者，如果它是一个文本元素，可以这样设置：  
        // document.getElementById('pageTitleText').textContent = "第一部分";  
        // 这里我们使用console.log来模拟  
        console.log("section1Content");  
    } else {  
        // 模拟设置默认标题  
        console.log("defaultContent");  
        // 类似地，如果pageTitle是DOM元素，则进行相应设置  
    }  
}  
  
// 当页面加载完成时调用函数  
window.onload = setupPageContent;

注意事项

• 确保页面上存在ID为section1Content、defaultContent和pageTitle的DOM元素。
• 如果页面上有多个不同的Hash值需要处理，可以在if-else语句中添加更多的条件分支。
• 考虑使用CSS类来控制元素的显示和隐藏，而不是直接在JavaScript中设置style.display属性，这样可以使代码更加清晰和可维护。
• 如果URL的Hash部分发生变化（例如，用户点击了页面上的锚点链接），你可能还需要监听hashchange事件来更新页面内容。
• 如果URL的Hash部分可能包含多个不同的值，并且每个值都对应一个不同的标题，那么可能需要一个更复杂的条件语句或映射表来根据Hash值设置标题。