document.referrer 遇到 H5 History

在一個(gè)Vue項(xiàng)目中，我需要獲取上一個(gè)頁(yè)面地址做判斷，從而為一個(gè)埋點(diǎn)事件傳值
當(dāng)使用this.$router.push跳轉(zhuǎn)后document.referrer的總是為""
后來(lái)發(fā)現(xiàn)通過(guò)創(chuàng)建a標(biāo)簽再模擬點(diǎn)擊的方式就可以正常獲取值
本質(zhì)上還是this.$router.push是基于H5 History實(shí)現(xiàn)的

回到之前的需求，對(duì)于業(yè)內(nèi)跳轉(zhuǎn)可以通過(guò)window.sessionStorage存儲(chǔ)值，消費(fèi)完刪除就可以了

我第一次以為是document.referrer不行，嘗試有沒(méi)有其它方式，卒，后來(lái)察覺(jué)可能和this.$router.push有關(guān)，嘗試用a標(biāo)簽?zāi)M點(diǎn)擊，再想到和H5 History有關(guān)

不過(guò)，在已有的埋點(diǎn)SDK中，盡管是this.$router.push跳轉(zhuǎn)document.referrer還是獲取到了值，我去觀察下實(shí)現(xiàn)。

typeof

偶然發(fā)現(xiàn) typeof adsdassdasadsad 會(huì)輸出undefined，而不是報(bào)錯(cuò)，要知道 adsdassdasadsad是沒(méi)有聲明的，不過(guò)typeof adsdassda;sadsad就會(huì)報(bào)錯(cuò)了，因?yàn)?號(hào)是一個(gè)語(yǔ)句的結(jié)束， 執(zhí)行sadsad就會(huì)報(bào)

在做nuxt的項(xiàng)目中，服務(wù)器端渲染的時(shí)候，想用獲取客戶端請(qǐng)求攜帶的cookie，用于鑒權(quán)，當(dāng)時(shí)是用js-cookie讀取，這是用在客戶端的，肯定是不行的，但是它不報(bào)錯(cuò)就很奇怪，發(fā)現(xiàn)源碼里做了判斷,類似于

if(typeof document === "undefined"){
  return;
}

H5鍵盤"前往" 改成"發(fā)送"

默認(rèn)

使用enterkeyhint="send"

<input enterkeyhint="send" />

更多類型: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/enterKeyHint
兼容性: https://caniuse.com/?search=HTML%20enterkeyhint

另外H5想要判斷鍵盤被拉起收回是不方便的，可以改成輸入框有值的時(shí)候再做一些UI上的改變，比如出現(xiàn)"發(fā)送"按鈕

vue 組件自動(dòng)導(dǎo)入

2020 - 03 - 19
在<template>直接寫組件是可以自動(dòng)導(dǎo)入的，還會(huì)放進(jìn)components里，哇哦。

本文將持續(xù)更新

關(guān)注專題 前端便利店 http://www.itdecent.cn/c/c3f77a86d9a5 ，幫您省時(shí)省力!