了解如何使用 CSS 的 url() 函數。 當我們談到背景圖片、@import 等等時，我們使用 url() 函數來載入資源： div { background-image: url(test.png); } 在這個例子中，我使用了相對 URL，它會在定義 CSS 檔案的資料夾中尋找該檔案。 我可以往前一層： div { background-image: url(../test.png); } 或進入一個資料夾： div { background-image: url(subfolder/test.png); } 或者，我可以從主機的根目錄開始載入文件： div { background-image: url(/test.png); } 或者，我可以使用絕對 URL 來載入外部資源： div { background-image: url(https://mysite.com/test.png); }
＃如何設置URL的片段部分 了解如何設置URL的片段部分的值 我有一次需要以編程方式更改URL的片段部分的需求 那是在#數字符號之後的部分 我當時在index.html上，我想要將URL更改為index.html#second這樣的形式 這是因為我有一個目錄，但是鏈接的工作方式並不符合我的期望 以下是我的解決方法： window.location.hash = 'second'
了解什麼是URL物件以及如何使用它。 URL是一個用於使用Blob來操作URL的命名空間，並提供了2個靜態方法： URL.createObjectURL() URL.revokeObjectURL() 使用URL.createObjectURL()函數可根據Blob生成URL： const myURL = URL.createObjectURL(aBlob) 一旦你有了Blob URL，你可以通過以下代碼從內存中銷毀它： URL.revokeObjectURL(myURL) 除此之外，URL還通過其構造函數提供了一個完全不同的功能，它可以用來創建URL。你可以這樣調用它： const currentUrl = new URL(window.location.href) 現在，currentUrl有一組屬性，你可以使用它來檢查URL的各個部分： hash：哈希片段 host：域名+端口 hostname：域名 href：包含整個URL origin：協議+域名+端口 password pathname port protocol search searchParams username 這些都是URL的常見部分。你可以修改其中任何一部分，除了origin和searchParams，它們是只讀的。你可以通過調用toString()方法或引用href屬性來生成新的URL字符串。
我需要捕獲不帶查詢參數的URL。 適用於 http 和 https 鏈接。 下面是我使用的正則表達式： /^(http[^?#]+).\*/gm 這是一個示例： const regex = /^(http[^?#]+).\*/gm const result = regex.exec("https://test.com?test=2") console.log(result) /* [ 'https://test.com?test=2', 'https://test.com', index: 0, input: 'https://test.com?test=2', groups: undefined ] */
在項目開發中，我需要獲取一個路徑的最後一個片段。 這個路徑可以是檔案系統路徑，也可以是URL。 以下是我使用的JavaScript程式碼： const lastItem = thePath.substring(thePath.lastIndexOf('/') + 1) 這段程式碼的原理是什麼？ thePath 字串包含一個路徑，例如 /Users/Flavio/Desktop。 我們使用 lastIndexOf('/') 在 thePath 字串上找到最後一個 / 的索引。 然後，我們將這個索引傳遞給 substring() 方法，同樣作用在 thePath 字串上。 這將返回一個新字串，從最後一個 / 的位置開始，再加上 1 (否則我們也會得到 /)。 最後，我們將這個字串賦值給 lastItem。 你也可以將它封裝成一個簡單的函數： const getLastItem = thePath => thePath.substring(thePath.lastIndexOf('/') + 1) getLastItem('/Users') getLastItem('/Users/Flavio') getLastItem('/Users/Flavio/test.jpg') getLastItem('https://flavicopes.com/test') 在上述例子中，getLastItem 函數分別應用在幾個不同的路徑上。
了解 JavaScript 提供的获取当前在浏览器中打开的 URL 的方法 要使用 JavaScript 获取在浏览器中打开的页面的当前 URL，您可以依赖浏览器在 window 对象上公开的 location 属性： window.location 由于 window 是浏览器中的全局对象，因此可以将该属性引用为 location 这是一个 Location 对象，它本身具有许多属性： 当前页面的 URL 在 location.href 中公开。location 的其他属性提供了有用的信息： 代码 描述 location.hostname 主机名 location.origin 源 location.hash 哈希值，即跟在 # 符号后面的部分 location.pathname 路径 location.port 端口 location.protocol 协议 location.search 查询字符串
在Hugo中，要獲取當前的URL可以使用以下代碼： {{ trim .Page.RelPermalink "/"}} 下面是代碼執行的結果： yoursite.com/ebooks -> "ebooks" yoursite.com/ebooks/php -> "ebooks/php"
了解如何獲取URL的片段部分的值 我曾經有需要以程式的方式訪問URL的片段部分，也就是#井號符號後面的部分。 例如，如果URL是index.html#second，我想要取回second。 以下是我如何實現的： const fragment = window.location.hash
在開發網頁時，您可能會見到類似以下的鏈接： <a href="#">功能</a> 這裡的 href="#" 是一個佔位符。該鏈接不會指向任何特定的地方。 有時這表示應用程序正在進行中，我們稍後會填寫該鏈接的 href 屬性。 其他情況下，您可能會見到以下類似的鏈接： <a href="#features">功能</a> 這種情況下，該鏈接引用了同一頁面中的某一點。 您會在頁面中找到類似以下元素： <a id="features">功能</a> 這個元素也可以是一個空元素，它存在於頁面上，但是被隱藏起來： <a id="features"></a> 請注意，我們在這裡使用了 id。 點擊這個項目： <a href="#features">功能</a> 將會跳轉到 id 等於 features 的 <a> 標簽。 完整描述一下，如果鏈接是這樣的： <a href="/features">功能</a> 點擊時，瀏覽器將在一個單獨的 URL 上打開。 您還可以結合使用，比如： <a href="/features#first">功能</a> 將打開 /features 的 URL，並滾動到 id="first" 的 <a> 標簽。