亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 <head> 中使用 window.history.replaceState() 是否安全?

在 <head> 中使用 window.history.replaceState() 是否安全?

當年話下 2023-07-14 15:49:02
我想刪除當用戶登錄我的網站時Facebook 添加到 URL 的#_=_偽影。我正在使用這個腳本:if (window.location.hash === '#_=_') {? ? const uri = window.location.toString();? ? const withNoHash = uri.substring(0, uri.indexOf('#'));? ? window.history.replaceState({}, document.title, withNoHash);}我希望腳本盡快啟動,所以我把它放在了<head>Chrome 和 Firefox 上,它似乎工作得很好。window.history當腳本執行時 API 已就緒,這是否標準化<head>?(document.title順便說一句)。
查看完整描述

4 回答

?
白衣染霜花

TA貢獻1796條經驗 獲得超10個贊

關于主題window


標準瀏覽器實現一個Window接口,通過該接口window向文檔中的 JavaScript 公開全局屬性。Window即使打開新選項卡,后續導航也會在同一文檔中加載不同的文檔。因此,您使用的屬性(例如window.location文檔window.history中的屬性)將在用戶(從 Facebook)導航到您的頁面之前出現Window,因此可用于您的文檔。


這也適用于當您直接在新的瀏覽器窗口中加載頁面時 - 文檔將有權訪問該window屬性。更多信息請Window參見window:https://developer.mozilla.org/en-US/docs/Web/API/Window


如果您擔心頁面被非標準瀏覽器加載,或者由于某種原因, window 屬性history和location屬性被覆蓋,您可以在調用它們之前檢查它們是否可用:


if (window && window.location && window.location.hash) {

// safely use window.location.hash here

}

但即便如此,客戶端的瀏覽器也會抑制該錯誤。


document.title關于使用with的主題replaceState()


規范將其指定為字符串,因此根據設計,如果未設置,它將返回空字符串。在文檔完全加載之前,Mozilla 不會發出關于使用它的警告。更多信息請參見https://developer.mozilla.org/en-US/docs/Web/API/Document/title


以下是我使用不帶標簽的 HTML 頁面進行的一些快速測試,看看是否確實如此<title>。

<html>

    <head>

        <script>

            console.log("title", document.title)

            window.history.replaceState({}, document.title, "newHMTL.page");

        </script>

    </head>

    <body>

    Testing

    </body>

</html>

沒有預期的錯誤或警告。


關于主題replaceState


該規范指出,大多數瀏覽器都會忽略您傳遞給的title/參數:document.titlereplaceState


目前大多數瀏覽器都會忽略此參數,盡管將來可能會使用它。在此處傳遞空字符串應該可以安全地防止將來對該方法進行更改?;蛘撸梢詡鬟f州的簡短名稱。


因此,當我準備好頁面時,進行一些更快速的測試。將標題設置為null; undefined; and a function;然后將其傳遞給replaceState不會更改歷史記錄中的標題,也不會在有標簽<title>或沒有標簽時在 Chrome 中引發錯誤。所以 6 次測試。


<html>

    <!-- <title>title</title> -->

    <head>

    <script>

        let title = () => alert("huh?") //null; //undefined;

        console.log("Title", title);

        window.history.replaceState({}, title, "NewHTML.page");

        //works as expected

    </script>

    </head>

    <body>

    Testing

    </body>

</html>


查看完整回答
反對 回復 2023-07-14
?
30秒到達戰場

TA貢獻1828條經驗 獲得超6個贊

是的,它是安全的,因為window當瀏覽器開始解析頭部時,對象就準備好了。

瀏覽器創建窗口 > 窗口將文檔對象加載到自身 > 文檔對象渲染 DOM > 文檔對象加載其所有資源 > 窗口對象觸發 onload 事件

head部分是 DOM api 的一部分,而Document對象是對象的屬性window,因此document一旦窗口對象準備好,就會加載該部分。由于它history.replaceState是對象的一部分window,因此在頭部執行任何腳本部分都是安全的。

Window 接口代表一個包含 DOM 文檔的窗口;document 屬性指向該窗口中加載的 DOM 文檔。可以使用 document.defaultView 屬性獲取給定文檔的窗口


查看完整回答
反對 回復 2023-07-14
?
蕪湖不蕪

TA貢獻1796條經驗 獲得超7個贊

阿羅哈)是的,這對您和您的客戶來說是安全的,因為窗口是一個全局對象,每個人都可以在瀏覽器中使用它,并且任何人都可以使用它。并且您的函數可以由任何人執行。在這種情況下,不用擔心安全問題;)



查看完整回答
反對 回復 2023-07-14
?
莫回無

TA貢獻1865條經驗 獲得超7個贊

它非常安全,但如果沒有監聽器,我不會在開發中使用它DOMContentLoaded。為了更加安全并考慮到那些使用舊版瀏覽器的人,我建議您添加該監聽器,DOMContentLoaded這樣window.onload您就不會在加載速度較慢的頁面上遇到任何問題。此外,對于window.historyAPI,由于它是本機函數,不需要單獨的功能,因此您可以安全、立即使用它。
TL;DR
添加一個DOMContentLoaded偵聽器以防萬一。

查看完整回答
反對 回復 2023-07-14
  • 4 回答
  • 0 關注
  • 157 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號