用 JavaScript 從 URL 獲取 HTML

Harshit Jindal 2023年10月12日
  1. 使用 XMLHttpRequest() 獲取帶有 URL 的 HTML 程式碼
  2. 使用 jQuery 獲取帶有 URL 的 HTML 程式碼
用 JavaScript 從 URL 獲取 HTML

使用瀏覽器開發工具可以輕鬆檢視網頁的原始碼。

但是 JavaScript 為我們提供的有趣功能是,我們可以在我們的頁面上獲取不同網頁的原始碼,而無需訪問該頁面。這篇文章展示了實現這一目標的各種方法。

使用 XMLHttpRequest() 獲取帶有 URL 的 HTML 程式碼

XML HTTP Request (XHR) 主要用於在不重新整理頁面的情況下從 URL 中檢索資料。因此它們可用於從不同的頁面獲取 HTML 程式碼。

function makeHttpObject() {
  if ('XMLHttpRequest' in window)
    return new XMLHttpRequest();
  else if ('ActiveXObject' in window)
    return new ActiveXObject('Msxml2.XMLHTTP');
}

var request = makeHttpObject();
request.open('GET', '/', true);
request.send(null);
request.onreadystatechange = function() {
  if (request.readyState == 4) console.log(request.responseText);
};

在上面的例子中,我們首先讓 HTTP 物件成為一個 HTTP 請求。

然後我們使用 open()send() 方法初始化併傳送 get 請求。當響應可用時,我們列印 HTML 程式碼。

使用 jQuery 獲取帶有 URL 的 HTML 程式碼

jQuery.ajax() 用於執行非同步 HTTP 請求。它將傳送請求的 URL設定(一組鍵值對)作為引數。

$.ajax({
  url: '/',
  success: function(data) {
    console.log(data);
  }
});

在上面的示例中,我們為 HTTP 請求傳遞了 URL,如果請求成功,我們列印返回的資料(即網頁的 HTML 程式碼)。

注意
以上解決方案不適用於跨域請求。
作者: Harshit Jindal
Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn