RL也被稱為網址。

URL 可以由單詞組成,比如 "w3school.com.cn"，或者是因特網協議(IP)地址：192.168.1.253。

大多數人在網上沖浪時,會鍵入網址的域名,因為名稱比數字容易記憶。

URL(Uniform Resource Locator)

當您點擊 HTML 頁面中的某個鏈接時,對應的<a>標簽指向萬維網上的一個地址。

統一資源定位器(URL)用于定位萬維網上的文檔(或其他數據)。

網址,比如 http://www.w3school.com.cn/html/index.asp,遵守以下的語法規則：

scheme://host.domain:port/path/filename

解釋：

scheme 定義因特網服務的類型。最常見的類型是 http

host 定義域主機(http 的默認主機是 www)

domain 定義因特網域名，比如 w3school.com.cn

:port 定義主機上的端口號(http 的默認端口號是 80)

path 定義服務器上的路徑(如果省略，則文檔必須位于網站的根目錄中)。

filename 定義文檔/資源的名稱

編者注：URL 的英文全稱是 Uniform Resource Locator，中文也譯為"統一資源定位符"。

URL Schemes

以下是其中一些最流行的 scheme：

Scheme 訪問 用于...

http 超文本傳輸協議 以 http:// 開頭的普通網頁。不加密。

https 安全超文本傳輸協議 安全網頁。加密所有信息交換。

ftp 文件傳輸協議 用于將文件下載或上傳至網站。

file 您計算機上的文件。

URL編碼

URL只能使用ASCII字符集來通過因特網進行發送。

由于URL常常會包含ASCII集合之外的字符,URL 必須轉換為有效的ASCII格式。

URL編碼使用"%"其后跟隨兩位的十六進制數來替換非ASCII字符。

URL不能包含空格。URL編碼通常使用+來替換空格。

URL編碼表參考

http://www.w3school.com.cn/tags/html_ref_urlencode.html

端功能問題系列文章，點擊上方合集↑

序言

大家好，我是大澈！

本文約2100+字，整篇閱讀大約需要3分鐘。

本文主要內容分三部分，如果您只需要解決問題，請閱讀第一、二部分即可。如果您有更多時間，進一步學習問題相關知識點，請閱讀至第三部分。

感謝關注微信公眾號：“程序員大澈”，然后加入問答群，從此讓解決問題的你不再孤單！

RL.createObjectURL() 是 JavaScript 中的一個方法，用于創建一個特殊的 URL，該 URL 可以用于將不支持直接加載的數據（如二進制數據或 Blob 對象）嵌入到 web 頁面中。這個方法通常用于將文件或數據轉換成可供瀏覽器加載的 URL。

語法

const objectURL = URL.createObjectURL(object);

參數

object：要創建 URL 的對象，通常是一個 Blob 對象或一個 File 對象。

返回值

objectURL：一個字符串，表示創建的 URL。這個 URL 可以被用作圖像、音頻、視頻等多媒體元素的 src 屬性，或者作為超鏈接的 href 屬性。

用途:

• 用于在 web 頁面上顯示二進制數據，如圖片、音頻、視頻等。
• 可用于預覽用戶上傳的文件，不必將文件上傳到服務器。
• 可用于處理客戶端生成的數據，如繪制到 <canvas> 元素后創建 URL 以供下載。

示例

// 創建一個 Blob 對象
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

// 使用 URL.createObjectURL 創建一個可用于展示 Blob 數據的 URL
const objectURL = URL.createObjectURL(blob);

// 在頁面上展示這個 URL
const imageElement = document.createElement('img');
imageElement.src = objectURL;
document.body.appendChild(imageElement);

// 一旦不再需要，可以通過調用 URL.revokeObjectURL() 來釋放資源
URL.revokeObjectURL(objectURL);

下載文件

// 創建一個按鈕來觸發保存文件操作
const saveButton = document.createElement('button');
saveButton.textContent = '保存文件';
document.body.appendChild(saveButton);

// 創建文本數據
const textData = '這是要保存的文本數據';

// 創建一個 Blob 對象，將文本數據放入其中
const blob = new Blob([textData], { type: 'text/plain' });

// 創建一個鏈接元素，允許用戶下載文件
const downloadLink = document.createElement('a');
downloadLink.textContent = '下載文件';
downloadLink.style.display = 'none'; // 隱藏鏈接
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'myFile.txt'; // 指定下載時的文件名

// 添加鏈接到文檔
document.body.appendChild(downloadLink);

// 添加點擊事件監聽器，以觸發下載
saveButton.addEventListener('click', function() {
  downloadLink.click();
});

// 在不再需要時，釋放資源
downloadLink.addEventListener('click', function() {
  URL.revokeObjectURL(downloadLink.href);
});

注意事項

• 創建的 URL 在使用后應該通過 URL.revokeObjectURL() 進行釋放，以釋放瀏覽器資源。
• 不同瀏覽器可能對支持的對象類型和 MIME 類型有所不同，因此在使用之前最好檢查瀏覽器的兼容性。

總結

URL.createObjectURL() 是一個有用的方法，可用于在 web 頁面中處理二進制數據和文件，使其能夠以 URL 的形式在頁面上展示。