include()类似于javascript中的函数

时间:2014-04-09 12:10:20

标签: javascript jquery jquery-load

目标

我需要一个简单地从另一个文件中获取所有代码并将代码粘贴到调用文件中的函数。

可能的解决方案

一个与PHP中的include()函数类似的函数。

原因

当我进行托管时,我使用php函数include("filename.html")在网站的所有文件中包含页眉和页脚等内容。这让生活变得更轻松!

现在我没有托管,因为我正在使用另一个网站,而我正在使用Github Pages,因此我无法使用PHP。我只需要使用HTML,JS和jQuery等。所以,我需要一个简单地从另一个文件中获取所有代码并将代码粘贴到调用文件中的函数。

已经尝试

    jQuery中的
  1. load()

    <pre><script>    
    $(document).ready(function(){
        $("#topbar").load("menubar.html");
    });    
    </script></pre>
    
  2. This question。我尝试了接受的答案,但这对我没用。

  3. 帮我解决这个问题。

3 个答案:

答案 0 :(得分:1)

您应该考虑设置一个构建环境,您可以在发布之前在本地编译内容。这样,您可以将代码组织在不同的文件中(例如,在您的情况下,页眉/页脚将始终包含在不同的内容文件中),在本地编译以将文件自动合并到发布目录中,然后上载

这样,而不是例如发送3个标题,内容和页脚文件请求,页眉和页脚被预编译到内容文件中,然后可以通过1个请求提供。

我个人使用Grunt作为纯静态网站的构建工具,以及连接任务(例如grunt-contrib-concat)。 Grunt网站上有几个教程,但您可以在此处看到如何为特定问题配置任务的示例:

https://stackoverflow.com/a/12749861/351435

答案 1 :(得分:0)

我这样做:

var template = {
    get: function (url, callback) {
        if (this[url]) return callback(null, this[url]);
        var self = this;
        $.ajax({
            "url": url,
            "type": "GET"
        })
        done(function (html) {
            self[url] = html;
            callback(null, html);
        })
        .fail(callback);
    }
}; 

在您需要这样做之后:

template.get("/menu.html", function (err, html, reason) {
    if (err) return alert('An error is append : '+reason);
    $("#topbar").html(html) // or append
});

答案 2 :(得分:-1)

我假设您的脚本在浏览器中运行。 在jQuery中尝试$ .getScript函数。

`$ .getMyScript(&#34; script.js&#34;,function(){

警告(&#34;脚本执行。&#34;);

});`

根据您希望解决方案获得的复杂程度,您还可以查看http://requirejs.org/以合并文件/脚本/模块。

我相信How do I include a JavaScript file in another JavaScript file?已完整回答了这个问题。