如何在特定的JavaScript代码中加载外部HTML页面？例如，在JS函数中

Question

I'm new to this website and not sure how it works and whether anybody would reply to my question or not, but worth a try, so will post my question here! 我是这个网站的新手，不确定它的工作原理以及是否有人会回答我的问题，但是值得一试，因此请在此处发布我的问题！ :) :)

Basically I've a HTML page which contains some within different parts of the page and here is my code: 基本上，我有一个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>

This page would load different things according to the URL parameter that I've set, so when different URL parameters is called, I want to load different external HTML pages within the same page, and don't want to use iframe and such! 此页面将根据我设置的URL参数加载不同的内容，因此，当调用不同的URL参数时，我想在同一页面中加载不同的外部HTML页面，并且不想使用iframe等！ Is this possible or not? 这有可能吗？ Please have a look at my code above! 请在上面查看我的代码！

In PHP we use: 在PHP中，我们使用：

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

But I don't know how to do this in JavaScript! 但是我不知道如何用JavaScript做到这一点！ Could somebody please help me with this! 有人可以帮我这个忙！

Thanks :) 谢谢：）

Answer 1

You'll need Ajax, something like this: 您将需要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

Try using a templating engine to load templates with data. 尝试使用模板引擎将数据加载模板。

There are many templating engines like EJS , mustache , jQuery-tmpl . 有许多模板引擎，例如EJS ， mustache ， jQuery-tmpl 。

The general idea is to request some a template file from the server based on your URL and use the templating engine to render it. 一般的想法是根据您的URL向服务器请求一些模板文件，并使用模板引擎来呈现它。 You can also request JSON data to populate your template with. 您还可以请求JSON数据来填充模板。

Answer 3

If you're okay with learning a new library, the simplest way is to use jQuery and its load method. 如果您可以学习新的库，则最简单的方法是使用jQuery及其加载方法。

There are some other cross-platform ways of using XmlHttpRequest objects to get an HTML page, but jQuery's is by far the simplest. 还有其他一些使用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