BOM系列-打开页面的方式

发表于 2019-03-13 更新于 2021-07-04 分类于 BOM

本文字数： 3.6k 阅读时长 ≈ 6 分钟

Location 对象是 Window 的子对象，但是也是全局对象，可以全局使用。

window.location === location
// true

打开新的页面

window.open()

open() 方法用于打开一个新的标签页或查找一个已命名的窗口。

window.open(URL,name,features,replace)

参数：

URL - 一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。

name - 一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记和

的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。

features - 一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。

replace - 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。

窗口特征：

1553055825795

有时浏览器会一些安全设置 window.open 可能被屏蔽。例如避免弹出广告窗口。

window.location

当前页面打开URL页面

window.location是对当前浏览器窗口的URL地址对象的参考，是只读对象。

但是仍然可以赋值 URL，当前标签页会强制刷新到目标页面，也就是重新定位当前页

window.location = 'https://www.baidu.com'
// 等效
window.location.href = 'https://www.baidu.com'
// 等效
location = 'https://www.baidu.com'
// 等效
location.href = 'https://www.baidu.com'

刷新当前页面

window.location.href=window.location.href 和window.location.reload()都是刷新当前页面。
区别在于是否有提交数据。当有提交数据时，window.location.reload() 会提示是否提交，window.location.href=window.location.href 则是向指定的url提交数据。

window.location.reload()

强制重新加载当前页面

window.location.reload(true);

window.location.href

window.location.href = window.location.href

修改路径URL不刷新页面

hash方式

a 标签

a 标签的 href 元素设置为 # 开头的值时，只修改 url 的 hash 值，不会强制刷新页面，如果是一个真实路径，则会发生强制刷新到目标页面（a 标签的默认行为，可以使用事件监听阻止默认行为）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>hash</title>
</head>
<body>
    <div>
        <a href="#/home">首页</a>
        <a href="#/about">关于</a>
    </div>
    <script>
        window.addEventListener('hashchange', function() {
            console.log('The hash has changed!')
        }, false);
    </script>
</body>
</html>

window.location.hash

直接在 url 上添加 hash 值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>hash</title>
</head>
<body>
    <div>
        <a href="/home">首页</a>
        <a href="/about">关于</a>
    </div>
    <script>
        window.addEventListener('hashchange', function() {
            console.log('The hash has changed!')
        }, false);
        const aEls = document.getElementsByTagName('a')
        for (let el of aEls) {
            el.addEventListener('click', function(e) {
				// 阻止 a 标签的默认行为
                e.preventDefault()
                const href = el.getAttribute('href')
                // window.location.hash = href
                // 等价于
                location.hash = href
            })
        }
    </script>
</body>
</html>

window.history 方式

history 类似于 location，都是 window 对象的子对象，但也是全局对象。

history 对象提供了浏览器的会话历史访问。它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转，同时——从HTML5开始——提供了对 history 栈中内容的操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>history state</title>
</head>
<body>
    <div>
        <a href="/home">首页</a>
        <a href="/about">关于</a>
    </div>
    <script>
        // 只能监听到 history 堆栈中已有的页面项改变
        window.addEventListener('popstate', urlChange)

        const aEls = document.getElementsByTagName('a')
        for (let el of aEls) {
            el.addEventListener('click', function(e) {
                e.preventDefault()
                const href = el.getAttribute('href')
                history.pushState({}, '', href)
                // state改变 手动 改变内容
                urlChange()
            })
        }

        const contentEl = document.getElementById('container')
        function urlChange() {
            switch (location.pathname) {
                case '/home':
                    contentEl.innerHTML = 'home'
                    break
                case '/about':
                    contentEl.innerHTML = 'about' 
                    break
                default:
                    contentEl.innerHTML = '' 
                    break
            }
        }
    </script>
</body>
</html>

注意：调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)，此外，a 标签的锚点也会触发该事件.

当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.