隨著Web開發與JavaScript語言的不斷發展，通過JavaScript調用頁面成為了更加常見的需求。相對于頁面跳轉，JavaScript調用頁面可以更加自由地實現單頁應用、異步加載組件等更加復雜的Web功能。本文將帶來一些最常見的JavaScript調用頁面方式，并詳細介紹其實現方法。
要實現JavaScript調用頁面，最核心的問題在于如何向瀏覽器發出調用請求。以下是幾種最常見的方式：
通過URL跳轉頁面
這是最常見的一種方式，也是最簡單的一種。頁面中使用JavaScript語言給window.location.href屬性賦值，即可使得瀏覽器向特定的URL地址發出請求，并跳轉到相應的頁面。

<code>
function goToPage(url) {
window.location.href = url;
}
<br>
// 調用示例，跳轉到百度首頁
goToPage("https://www.baidu.com");
</code>

通過iframe加載頁面
這種方式可以在不改變原頁面的情況下，將新頁面加載到iframe標簽內，實現異步加載不同的頁面內容。

<code>
function loadPageToIframe(url) {
var iframe = document.createElement("iframe");
iframe.src = url;
document.body.appendChild(iframe);
}
<br>
// 調用示例，將百度首頁加載到id為iframe的標簽內
loadPageToIframe("https://www.baidu.com", "iframe");
</code>

通過XMLHttpRequest獲取頁面
這種方式與前兩種方式略有不同，它更加適用于在不跳轉頁面的情況下獲取某個頁面的源碼或特定信息。XMLHttpRequest可以發送一個HTTP請求，獲取指定URL頁面的內容，并保存在responseText屬性中。需要注意的是，在獲取頁面時需要考慮瀏覽器的同源策略。

<code>
function getPageContent(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
callback(xhr.responseText);
} else {
console.error("獲取頁面失敗");
}
}
};
xhr.send(null);
}
<br>
// 調用示例，獲取百度首頁的源碼并顯示在頁面上
getPageContent("https://www.baidu.com", function(content) {
var div = document.createElement("div");
div.innerHTML = content;
document.body.appendChild(div);
});
</code>

通過fetch獲取頁面
與XMLHttpRequest相似，fetch也可以發送HTTP請求，并獲取頁面內容。與XMLHttpRequest相比，fetch是由ES6語言提供的標準方法，語法更加簡潔易懂。需要注意的是，在獲取頁面時同樣需要遵守瀏覽器的同源策略。

<code>
function getPageContent(url) {
fetch(url)
.then(response => response.text())
.then(content => {
var div = document.createElement("div");
div.innerHTML = content;
document.body.appendChild(div);
})
.catch(error => console.error("獲取頁面失敗", error));
}
<br>
// 調用示例，獲取百度首頁的源碼并顯示在頁面上
getPageContent("https://www.baidu.com");
</code>

通過WebSocket接收頁面
WebSocket可以在瀏覽器與服務器之間建立持久化的雙向通信，當服務器端有新內容更新時，可以通過WebSocket將內容推送給瀏覽器，并實現頁面的實時更新。需要注意的是，WebSocket也需要遵循同源策略。

<code>
var socket = new WebSocket("wss://example.com/socketserver");
<br>
socket.onopen = function(event) {
// 已經建立連接，可以發送消息
socket.send("獲取頁面內容");
};
<br>
socket.onmessage = function(event) {
// 接收到服務器端推送的內容
var content = event.data;
var div = document.createElement("div");
div.innerHTML = content;
document.body.appendChild(div);
};
<br>
socket.onerror = function(error) {
console.error("WebSocket運行出錯", error);
};
</code>

JavaScript調用頁面是Web開發的重要組成部分，本文介紹了最常見的幾種調用方式，并展示了它們的實現方法。隨著Web技術的不斷發展，JavaScript調用頁面也將不斷優化，帶來更加優秀的Web使用體驗。