Meteor加载特定于页面的CSS脚本

Meteor load scripts, CSS specific to pages

本文关键字：CSS 脚本 于页面 加载 Meteor      更新时间：2023-09-26

我目前遇到的问题是，我希望只能执行特定的脚本和CSS文件，因为如果在错误的页面上执行，会在浏览器控制台中产生错误。

我正在为Meteor使用"Iron路由器"，只有基本的代码才能使其工作。现在，有没有一种方法可以让我将脚本作为参数发送，从而只加载我希望页面加载的脚本？

简而言之，没有。（然而。）

如果你有错误，你可能有一个错误的代码结构。有一些方法可以仅在需要时执行代码-您可能应该看看template.rendered和template.created回调，以及iron路由器控制器。然而，这是为了执行——一切都是从一开始就加载的。

也就是说，从技术上讲，可以使用require.js之类的东西来动态加载一些脚本。但这否定了流星的大部分优势。让它与流星一起正常工作也是相当困难的。

确实，目前还没有官方的方法来做到这一点，但有一些有效的方法可以做到。以我如何将Disqus加载到博客部分为例。

Template.blog.rendered = function() {  
  setTimeout(function(){
     var disqus_shortname = 'disqus_shortname'; // required: replace example with your forum shortname
     var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
     dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })
}

摘自乔什·欧文的博客。不同的是，我包装这是一个超时，这样它就可以阻止等待模板实际渲染。

这个脚本所做的是创建一个脚本元素，设置其src，并将其作为子元素附加到模板的头部或主体。同样，它只在渲染模板之后才这样做，这意味着脚本可以使用所有元素。

如果你正在使用Iron Router，你可以使用onAfterAction做同样的事情。关键是将新脚本附加为dom中的子节点。希望这能有所帮助。

警告：不是最佳解决方案

好吧，我就是这么做的。我把CSS和JavaScript文件放在public文件夹中，然后在<head>中我写了一个小脚本：

$(function() {
    if(location.href.indexOf("http://yourpage.com/page") > -1) //where page is the url you want to server the files
        $('head').append('<link rel="stylesheet" href="/mobile.app.css" type="text/css" />');
});

虽然这根本不是最好的方法，但这可以通过一种"巧妙"的方式来实现。

但它奏效了。

您可以使用预加载程序。它对我有效：）。

我的解决方案是将JavaScript文件内容封装在默认函数中（如果不熟悉，请查找ECMAScript 6的导出），然后将其导入Meteor中。

在您的JavaScript文件（我们称之为"test.js"）中，用以下内容包装整个内容：

export default function() {
    // Your file contents
}

然后，在你想要使用JavaScript文件的Meteor文件的顶部（在我们的例子中是"test.js"），在页面顶部写一个导入，如下所示：

import test from './test.js'

然后在同一个Meteor文件中，您可以像函数调用一样使用文件名来调用JavaScript文件的全部内容：

test();

我在Meteor内部使用React，但原理是一样的。

相关文章：