如何在特定的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