# 图书馆

# window 对象方法

# window.location 对象

window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。window.location 对象在编写时可不使用 window 这个前缀。

location.hostname // 返回 web 主机的域名
location.pathname // 返回当前页面的路径和文件名
location.origin // 返回https://www.xxxxxxxx.com
location.port // 返回 web 主机的端口 (80 或 443)
location.protocol // 返回所使用的 web 协议(http:// 或 https://)
window.location.href = 'http://www.xxxxxxxx.com' // 跳转后有后退功能
window.location.replace('http://www.xxxxxxxx.net') // 跳转后没有后退功能
window.open('http://www.xxxxxxxx.net') // 在新的窗口打开链接,一般用于简单的弹出页面
window.location.reload() // 刷新当前页面
parent.location.reload() // 刷新父亲对象(用于框架)
opener.location.reload() // 刷新父窗口对象(用于单开窗口)
top.location.reload() // 刷新最顶端对象(用于多开窗口)
1
2
3
4
5
6
7
8
9
10
11
12

# window.history 对象

window.history 对象包含浏览器的历史。window.history 对象在编写时可不使用 window 这个前缀。

window.history.back() // 加载历史列表中的前一个URL,与在浏览器点击后退按钮相同,
window.history.forward() // 加载历史列表中的下一个URL。 与在浏览器中点击按钮向前相同
1
2

# window.navigator 对象

window.navigator 对象包含有关访问者浏览器的信息,对象在编写时可不使用 window 这个前缀

来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:

navigator 数据可被浏览器使用者更改 一些浏览器对测试站点会识别错误 浏览器无法报告晚于浏览器发布的新操作系统

window.navigator.appCodeName // 返回浏览器的代码名。
window.navigator.appName // 返回代表浏览器名的字符串。
window.navigator.appMinorVersion // 返回浏览器的次版本号。该属性是一个只读的字符串。仅IE有效。
window.navigator.userAgent // 返回代表浏览器名和版本号的字符串。
window.navigator.platform // 返回浏览器平台的字符串("Win32", "Win16", "WinCE", "Mac68k", "MacPPC", "HP-UX", "SunOS" 等)。
window.navigator.cpuClass // 返回CPU的信息("x86", "68K", "Alpha", "PPC" 等)。仅IE有效。
window.navigator.browserLanguage // 返回浏览器的语言种类。仅IE有效。
window.navigator.systemLanguage // 返回系统的语言种类。仅IE有效。
window.navigator.userLanguage userLanguage // 返回用户环境的语言种类。仅IE有效。
window.navigator.cookieEnabled // 返回 cookie 是否可用的真伪值。
window.navigator.onLine // 返回是否能连上网络的真伪值。
window.navigator.javaEnabled() // 返回 Java 是否可用的真伪值。
window.navigator.userProfile // 保存着用户信息的对象。拥有 addReadRequest() doReadRequest() getAttribute() clearRequest() 等方法。
window.navigator.taintEnabled() // 是否可以加密数据的真伪值。仅IE有效。
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# window 其它方法

// setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
window.setInterval() // 间隔指定的毫秒数不停地执行指定的代码。
window.setTimeout() // 暂停指定的毫秒数后执行指定的代码
window.clearInterval() // 方法用于停止 setInterval() 方法执行的函数代码。
window.clearTimeout() // 方法用于停止执行setTimeout()方法的函数代码。
window.alert() // 警告框
window.prompt() // 确认框
window.confirm() // 输入框
window.open() // 打开新窗口
window.close() // 关闭当前窗口
window.moveTo() // 移动当前窗口
window.resizeTo() // 调整当前窗口的尺寸
window.frameElement // 获取当前文档的宿主节点iframe元素
window.execScript() // execScript函数与eval的功能相同,不同的是eval函数执行后的脚本的作用域是当前执行上下文,而execScript则总是针对全局作用域。
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# H5 微信授权(原生)

# 1.前端向微信服务端发送请求

// 提取本地缓存中的openId
let openId = localStorage.getItem('openId')
// 如果有openId,则不再往下执行
if (openId) return
// 微信公众号appid
let appid = '***************'
// 重定向地址
let redirect_uri = encodeURIComponent(window.location.href)
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
1
2
3
4
5
6
7
8
9

用户同意授权后(静默授权除外)

如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE

# 2.前端通过重定向后的 URL 地址获取 Code

// 定义获取参数的方法
function getQueryVariable {
    let query = window.location.search.substring(1)
    let vars = query.split('&')
    for (let i = 0; i < vars.length; i++) {
        let pair = vars[i].split('=')
        if (pair[0] == variable) {
            return pair[1]
        }
    }
    return false
}
let code = getQueryVariable('code') // URL中的code属性值(code值)
1
2
3
4
5
6
7
8
9
10
11
12
13

# 3.调用后端接口获取用户信息

// 如果有code
if (code) {
    // 获取用户信息
    let wx = await this.$axios.getUserInfo({ params: { code } })
    if (wx.status !== 200) {
        return this.$toast('授权失败')
    }
    // 用户信息
    this.userInfo = wx.data
    // 存储openId
    localStorage.setItem('openId', wx.data.openId)
}
1
2
3
4
5
6
7
8
9
10
11
12

# H5 微信授权(使用 NodeJS 工具)

wechat-oauth (opens new window) 微信公共平台 OAuth 接口消息接口服务中间件与 API SDK

安装:

npm install wechat-oauth
1

使用:

// 初始化及配置
let OAuth = require('wechat-oauth')
let client = new OAuth('your appid', 'your secret')
// 获取授权页面的URL地址
let url = client.getAuthorizeURL(window.location.href, 'STATE', 'snsapi_userinfo')
window.location.href = url
// 获取Openid和AccessToken
client.getAccessToken('code', (err, result) => {
    let accessToken = result.data.access_token
    let openid = result.data.openid
    console.log(accessToken, openid)
})
// 获取用户信息
client.getUser('openid', (err, result) => {
    console.log(result)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# JS 禁止 DOM 方法

使用return false可以实现禁用原生的方法

# 禁止右键

<div oncontextmenu="return false"></div>
1

# 禁止复制和剪切元素

<div oncopy="return false"></div>
<div oncut="return false"></div>
1
2

# 禁止选中元素

<div onselectstart="return false"></div>
1

# 禁止拖动元素

<div ondragstart="return false"></div>
1