如何在特定的JavaScript代碼中加載外部HTML頁面？例如，在JS函數中

Question

我是這個網站的新手，不確定它的工作原理以及是否有人會回答我的問題，但是值得一試，因此請在此處發布我的問題！ :)

基本上，我有一個HTML頁面，其中包含頁面不同部分的內容，這是我的代碼：

<html>
<head>
<title>Welcome to My 1st JavaScript Page</title>
</head>
<body>

<script type="text/javascript">
//
var parameter = document.location.search.replace("?", "").replace("=", "");

// IF NO PARAMETER
if (!document.location.search || !parameter) {
    document.write("No parameter is defined. Please either set ?pictures, ?videos or ?music");

// IF PARAMETER
} else {
    // IF GAMES
    if (parameter == "pictures") {
        // FOR EXAMPLE INCLUDE THE PICTURES.HTML

    // IF VIDEOS
    } else if (parameter == "videos") {
        // FOR EXAMPLE INCLUDE THE VIDEOS.HTML

    // IF MUSIC
    } else if (parameter == "music") {
        // FOR EXAMPLE INCLUDE THE MUSIC.HTML
    }

}
</script>

</body>
</html>

此頁面將根據我設置的URL參數加載不同的內容，因此，當調用不同的URL參數時，我想在同一頁面中加載不同的外部HTML頁面，並且不想使用iframe等！ 這有可能嗎？ 請在上面查看我的代碼！

在PHP中，我們使用：

<?php
    include ("./includes/music.html");
?>

但是我不知道如何用JavaScript做到這一點！ 有人可以幫我這個忙！

謝謝：）

Answer 1

您將需要Ajax，如下所示：

function include(page) {
    var rq = null;
    if(window.XMLHttpRequest) {
        rq = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        try { rq = new ActiveXObject("Msxml2.XMLHTTP"); } catch(o) { try { rq = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} }
    }
    if(rq) {
        try {
            rq.open("GET", page, false);
            rq.send(null);
            document.body.innerHTML = rq.responseText;
        } catch(ex) {
            // Provide a fallback here, probably a redirect
        }
    } else {
         // Provide a fallback here, probably a redirect
    }
}

Answer 2

嘗試使用模板引擎將數據加載模板。

有許多模板引擎，例如EJS ， mustache ， jQuery-tmpl 。

一般的想法是根據您的URL向服務器請求一些模板文件，並使用模板引擎來呈現它。 您還可以請求JSON數據來填充模板。

Answer 3

如果您可以學習新的庫，則最簡單的方法是使用jQuery及其加載方法。

還有其他一些使用XmlHttpRequest對象獲取HTML頁面的跨平台方法，但jQuery是迄今為止最簡單的方法。

如何在特定的JavaScript代碼中加載外部HTML頁面？例如，在JS函數中

問題描述

3 個解決方案

解決方案1
1 2011-05-15 22:25:35

解決方案2
0 2011-05-15 22:22:59

解決方案3
0 2011-05-15 22:23:09

如何在特定的JavaScript代碼中加載外部HTML頁面？ 例如，在JS函數中

問題描述

3 個解決方案

解決方案1 1 2011-05-15 22:25:35

解決方案2 0 2011-05-15 22:22:59

解決方案3 0 2011-05-15 22:23:09

如何在特定的JavaScript代碼中加載外部HTML頁面？例如，在JS函數中

解決方案1
1 2011-05-15 22:25:35

解決方案2
0 2011-05-15 22:22:59

解決方案3
0 2011-05-15 22:23:09