IOS網(wǎng)頁后退叔遂、pageshow、document.referrer争剿、visibilitychange

IOS中已艰,網(wǎng)頁的前進(jìn)后退操作(包括history.go()history.back()等)是直接進(jìn)入其離開時(shí)的快照蚕苇,不會(huì)重新觸發(fā)頁面的load事件哩掺。此時(shí)js從上次離開時(shí)的狀態(tài)繼續(xù)往下執(zhí)行。

1. 使用document.referrer代替history.back()進(jìn)行返回

location.href = document.referrer;

document.referrer是一個(gè)字符串涩笤,內(nèi)容為上一頁面的URL(通過_blank形式打開的新窗口也可以獲得之前頁面的URL)

  • 以下情況document.referrer會(huì)為空字符串""
  1. 通過在瀏覽器中輸入地址嚼吞、使用書簽盒件、掃碼等方式進(jìn)入頁面
  2. 受到 referrer-policy 配置影響
缺點(diǎn)
  1. 存在以上限制
  2. 不同瀏覽器可能有兼容差異
  3. 本質(zhì)上是一次跳轉(zhuǎn)而非返回,如 a-b-c-d 舱禽,d頁面通過window.location.href=document.referrer返回到c頁面炒刁,對(duì)于c頁面來說b不是他的上一級(jí)頁面了、上一級(jí)頁面變成了d;

2. 使用pageshow呢蔫、pagehide事件

不同瀏覽器對(duì)load/unload/pageshow/pagehide表現(xiàn)不同切心,使用前需多加測(cè)試

  • onpageshow 事件在用戶瀏覽網(wǎng)頁時(shí)觸發(fā)(onload之后)。
    類似于 onload 事件片吊,但onload只在頁面第一次加載時(shí)觸發(fā), onpageshow 事件在每次加載頁面時(shí)觸發(fā)协屡,即 onload 事件當(dāng)頁面從瀏覽器緩存中讀取時(shí)不觸發(fā)(如通過前進(jìn)/后退進(jìn)入頁面時(shí))俏脊。
  • onpagehide 事件在用戶離開網(wǎng)頁時(shí)觸發(fā)(onunload之前)。

第一次進(jìn)入時(shí)肤晓,觸發(fā)pageshow爷贫,此時(shí)isPageHidefalse。離開頁面時(shí)觸發(fā)pagehide补憾,isPageHide變?yōu)?code>true漫萄。第二次進(jìn)入時(shí)再次觸發(fā)pageshow,此時(shí)isPageHidetrue盈匾,成功觸發(fā)頁面刷新意系。

  $(function () {
    var isPageHide = false;
    window.addEventListener('pageshow', function () {
      if (isPageHide) {
        window.location.reload();
      }
    });
    window.addEventListener('pagehide', function () {
      isPageHide = true;
    });
  }) 

referer 引薦來源

referer 參數(shù)是http請(qǐng)求頭header的參數(shù)牙躺,表示請(qǐng)求的來源地址。
該地址的路由或query信息中可能包含一些敏感信息(如token或者用戶id),為了防止信息泄漏可用 referrer-policy 控制
注意缝裁,僅請(qǐng)求頭中因W3C的疏忽拼寫錯(cuò)誤,為referer筋栋,但其他場(chǎng)合下(如document.referrerreferrer-policy)為正確拼寫咒彤。

referrer-policy 引薦來源策略

referrer-policy 用于控制 referer ,可按情況提交為完整地址劈伴、僅Origin(協(xié)議+域名+端口)密末、隱藏地址,但無法篡改 referrer 為虛假地址跛璧。

配置方法
  • 全局設(shè)置
    通過meta標(biāo)簽严里,設(shè)置整個(gè)網(wǎng)頁中所有鏈接的默認(rèn)策略
<meta name="referrer" content="origin">
  • 單獨(dú)設(shè)置
    <a>、<area>赡模、<img>田炭、<iframe>、<link>漓柑,可在標(biāo)簽里單獨(dú)設(shè)置該請(qǐng)求的referrerpolicy屬性
<a  referrerpolicy="origin" target="_blank">鏈接</a>

可選擇的屬性目前有9種:

  • no-referrer
    總是不發(fā)送referrer信息
  • no-referrer-when-downgrade
    協(xié)議降級(jí)(https調(diào)用http)時(shí)不發(fā)送referrer信息
  • same-origin
    僅同源(協(xié)議教硫、域名叨吮、端口都相同)時(shí)發(fā)送
  • origin
    總是發(fā)送origin(即協(xié)議+域名+端口)
  • strict-origin
    協(xié)議降級(jí)(https調(diào)用http)時(shí)不發(fā)送referrer信息
    其他場(chǎng)合同origin
  • origin-when-cross-origin
    跨域時(shí)僅發(fā)送origin(即協(xié)議+域名+端口)
    同源時(shí)發(fā)送完整信息
  • strict-origin-when-cross-origin
    既跨域又協(xié)議降級(jí)(https調(diào)用http)時(shí),僅發(fā)送origin(即協(xié)議+域名+端口)
    其他場(chǎng)合發(fā)送完整的referrer
  • unsafe-url
    總是發(fā)送完整的referrer
  • 空字符串
    采用其他位置定義的引用者策略瞬矩,或者在沒有此類更高級(jí)別策略的情況下茶鉴,默認(rèn)為“ no-referrer-when-downgrade”(不同瀏覽器版本可能不同,新版Chrome為 strict-origin-when-cross-origin)

visibilitychange

pageshow/pagehide會(huì)在頁面跳轉(zhuǎn)前后觸發(fā)景用,而visibilitychange會(huì)在頁面被隱藏或顯示時(shí)(如瀏覽器tab切換涵叮、窗口被最小化等)觸發(fā),配合Document.hidden可以實(shí)現(xiàn)如"頁面被切到后臺(tái)時(shí)停止聲音播放伞插,切到前臺(tái)時(shí)恢復(fù)播放"等功能割粮。

    // 設(shè)置隱藏屬性和改變可見屬性的事件的名稱
    var hidden, visibilityChange; 
    if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
      hidden = "hidden";
      visibilityChange = "visibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
      hidden = "msHidden";
      visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
      hidden = "webkitHidden";
      visibilityChange = "webkitvisibilitychange";
    }

    var videoElement = document.getElementById("videoElement");

    // 如果頁面是隱藏狀態(tài),則暫停視頻
    // 如果頁面是展示狀態(tài)媚污,則播放視頻
    function handleVisibilityChange() {
      if (document[hidden]) {
        videoElement.pause();
      } else {
        videoElement.play();
      }
    }

    // 如果瀏覽器不支持addEventListener 或 Page Visibility API 給出警告
    if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
      console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
    } else {
      
    // 處理頁面可見屬性的改變
    document.addEventListener(visibilityChange, handleVisibilityChange, false);
      
    // 當(dāng)視頻暫停舀瓢,設(shè)置title
    // This shows the paused
    videoElement.addEventListener("pause", function(){
      document.title = 'Paused';
    }, false);
      
    // 當(dāng)視頻播放,設(shè)置title
    videoElement.addEventListener("play", function(){
      document.title = 'Playing'; 
    }, false);
  }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末耗美,一起剝皮案震驚了整個(gè)濱河市京髓,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌商架,老刑警劉巖堰怨,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異蛇摸,居然都是意外死亡备图,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門皇型,熙熙樓的掌柜王于貴愁眉苦臉地迎上來诬烹,“玉大人,你說我怎么就攤上這事弃鸦〗视酰” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵唬格,是天一觀的道長(zhǎng)家破。 經(jīng)常有香客問我,道長(zhǎng)购岗,這世上最難降的妖魔是什么汰聋? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮喊积,結(jié)果婚禮上烹困,老公的妹妹穿的比我還像新娘。我一直安慰自己乾吻,他們只是感情好髓梅,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布拟蜻。 她就那樣靜靜地躺著,像睡著了一般枯饿。 火紅的嫁衣襯著肌膚如雪酝锅。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天奢方,我揣著相機(jī)與錄音搔扁,去河邊找鬼。 笑死蟋字,一個(gè)胖子當(dāng)著我的面吹牛稿蹲,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播鹊奖,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼场绿,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了嫉入?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤璧尸,失蹤者是張志新(化名)和其女友劉穎咒林,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體爷光,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡垫竞,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蛀序。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片欢瞪。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖徐裸,靈堂內(nèi)的尸體忽然破棺而出遣鼓,到底是詐尸還是另有隱情,我是刑警寧澤重贺,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布骑祟,位于F島的核電站,受9級(jí)特大地震影響气笙,放射性物質(zhì)發(fā)生泄漏次企。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一潜圃、第九天 我趴在偏房一處隱蔽的房頂上張望缸棵。 院中可真熱鬧,春花似錦谭期、人聲如沸堵第。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽型诚。三九已至客燕,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間狰贯,已是汗流浹背也搓。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留涵紊,地道東北人傍妒。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像摸柄,于是被迫代替她去往敵國和親颤练。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • ??JavaScript 與 HTML 之間的交互是通過事件實(shí)現(xiàn)的。 ??事件跃脊,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,503評(píng)論 1 11
  • 本節(jié)介紹各種常見的瀏覽器事件宇挫。 鼠標(biāo)事件 鼠標(biāo)事件指與鼠標(biāo)相關(guān)的事件,主要有以下一些酪术。 click 事件器瘪,dblc...
    許先生__閱讀 2,446評(píng)論 0 4
  • 概述 document節(jié)點(diǎn)是文檔的根節(jié)點(diǎn),每張網(wǎng)頁都有自己的document節(jié)點(diǎn)绘雁。window.document屬...
    許先生__閱讀 646評(píng)論 0 2
  • 一橡疼、概述 document節(jié)點(diǎn)是整個(gè)文檔樹的頂層節(jié)點(diǎn),每張網(wǎng)頁都有自己的document節(jié)點(diǎn)庐舟。window.doc...
    周花花啊閱讀 1,336評(píng)論 0 1
  • 一欣除、JS前言 (1)認(rèn)識(shí)JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示)继阻,會(huì)使用HT...
    凜0_0閱讀 2,777評(píng)論 0 8