<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>location 对象示例</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .section { margin: 20px 0; padding: 10px; border: 1px solid #ddd; }
        button { margin: 5px; padding: 5px 10px; }
        .result { margin-top: 10px; padding: 10px; background: #f0f8ff; }
    </style>
</head>
<body>
    <h1>location 对象示例</h1>
    
    <div class="section">
        <h2>1. href 属性</h2>
        <button onclick="getHref()">获取当前 URL</button>
        <button onclick="jumpToItcast()">跳转到传智播客</button>
        <div class="result" id="hrefResult"></div>
    </div>
    
    <div class="section">
        <h2>2. search 属性</h2>
        <button onclick="getSearch()">获取 URL 参数</button>
        <div class="result" id="searchResult"></div>
    </div>
    
    <div class="section">
        <h2>3. reload 方法</h2>
        <button onclick="reloadPage()">刷新页面</button>
        <button onclick="forceReload()">强制刷新</button>
    </div>
    
    <script>
        // href 属性示例
        function getHref() {
            document.getElementById('hrefResult').textContent = '当前 URL: ' + location.href;
        }
        
        function jumpToItcast() {
            location.href = 'https://cnkrru.github.io/blog/';
        }
        
        // search 属性示例
        function getSearch() {
            document.getElementById('searchResult').textContent = 'URL 参数: ' + location.search;
        }
        
        // reload 方法示例
        function reloadPage() {
            location.reload();
        }
        
        function forceReload() {
            location.reload(true);
        }
    </script>
</body>
</html>