包括（）之类的JavaScript

目标包括（）之类的JavaScript

我需要一个功能，只是需要所有的代码从另一个文件和粘贴代码在调用文件功能。

可能的解决方案

工作方式类似于在PHP中include()功能的功能。

原因

当我主持，我使用了PHP函数include("filename.html")到包括像页眉和页脚，在网站上的所有文件。这让生活变得更加轻松！

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

已经尝试过

load() jQuery中。

<pre><script>  
$(document).ready(function(){ 
    $("#topbar").load("menubar.html"); 
});  
</script></pre>

This question。我尝试了接受的答案，但那对我没有用。

请能帮我解决这个问题。

来源

2014-04-09 IcyFlame

+14

你确定你的意思'$（“顶栏”）'，而不是'$（ “＃顶栏”）'？正如前者表明你有一个''元件 – CodingIntrigue

对不起。我将立即编辑该问题。 – IcyFlame

使用预处理器并在上传文件之前完成你的包含。这解决了无法做到服务器端的问题，以及尝试做到客户端的所有问题。 – Quentin

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

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

就我个人而言，我使用Grunt作为纯静态网站的构建工具，连同一个并置任务（如grunt-contrib-concat）。有繁重的网站上几个教程，但你可以看到的例子如何配置任务的具体问题就在这里：

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

来源

2014-04-09 13:04:00

这似乎是一个不错的解决方案。但我还没有尝试过。我将不得不在Grunt上阅读这个。所以，我要这样做！同时，谢谢！一旦我对解决方案感到满意，我会接受答案。 – IcyFlame

这是周围最性感的解决方案之一！它的作用远远超过解决我的问题！感谢您的解决方案！ – IcyFlame

是否有一个可以帮助我将特定文件插入特定标记的div的插件？（就像将'menubar.html'文件中的代码插入''div''标签'topbar'？ – IcyFlame

-1

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

`$ .getMyScript（ “的script.js”，函数（）{

警报（ “脚本执行。”）;

}）;`

取决于你如何想的复杂你的解决方案得到，你也可以看看http://requirejs.org/合并文件/脚本/模块。

我相信这个问题在How do I include a JavaScript file in another JavaScript file?全部回答。

来源

2014-04-09 12:53:18 Creatier

我想要包含一个HTML文件。不是一个JavaScript文件。如果你建议，我把html代码放在一个js文件中，然后使用上面的解决方案，我不想那样做。我已经在互联网上的某个地方阅读过这个解决方案，并且这个解决方案的压力很大非常抱歉！这不是我正在寻找的。 – IcyFlame

我做这样的事情：

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 
});

来源

2014-04-09 12:56:10

你能否详细说明一下？ – IcyFlame

我使用它来获取我的web应用程序中的模板。使用此代码，您可以加载任何html文件并创建缓存，第一次将加载文件，第二次将获取缓存中的资源。回调的第一个参数是错误（如果发生），第二个是结果（所以你的html文件的内容） –

包括（）之类的JavaScript

回答

相关问题