流星加载脚本,特定于页面的 CSS

Posted

技术标签:

【中文标题】流星加载脚本,特定于页面的 CSS【英文标题】:Meteor load scripts, CSS specific to pages 【发布时间】:2013-09-03 14:59:31 【问题描述】:

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

我正在为 Meteor 使用“Iron router”,只有基本代码才能使其工作。现在,有没有办法让我将脚本作为参数发送,所以它只加载我希望页面加载的那些?

【问题讨论】:

【参考方案1】:

简而言之,没有。 (还)

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

话虽如此,您在技术上可以使用像require.js 这样的东西来动态加载一些脚本。但这否定了 Meteor 的大部分优势。让它与 Meteor 一起正常工作也相当困难。

【讨论】:

【参考方案2】:

确实,目前还没有正式的方法来做到这一点,但有一些有效的方法可以做到这一点。以我如何将 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);
  )

摘自 Josh Owen 的博客。不同之处在于我包装这是一个超时,以便它阻止等待模板实际呈现。

此脚本所做的是创建一个脚本元素,设置其 src 并将其作为子元素附加到模板的头部或主体。同样,它仅在模板渲染后才会这样做,这意味着您的所有元素都可用于您的脚本。

如果您使用 Iron Router,您可以使用 onAfterAction 执行相同的操作。关键是将新脚本作为子节点附加到您的 dom 中。希望这会有所帮助。

【讨论】:

【参考方案3】:

警告:不是最好的解决方案

好的,这就是我所做的。我将 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" />');
);

虽然这根本不是最好的方法,但这可以通过一种“hacky”的方式来完成。

但它奏效了。

【讨论】:

对我来说不适用于'&lt;script&gt;&lt;/script&gt;'(但它适用于'&lt;link /&gt;')。【参考方案4】:

您可以使用Preloader。它对我有用:)。

【讨论】:

【参考方案5】:

我的解决方案是将 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,但原理是一样的。

【讨论】:

以上是关于流星加载脚本,特定于页面的 CSS的主要内容,如果未能解决你的问题,请参考以下文章

Worklight - 特定于环境的 CSS

Rails 3.1 资产管道:如何加载特定于控制器的脚本?

页面顶部的空白(特定于 Firefox)[关闭]

如何从包含所有页面的 JS 代码的单个 JS 文件中使用特定于某些页面的 JS 代码?

通过回发但特定于页面用户的变量的持久性

使用 Rails 6,您将“特定于页面”的 JavaScript 代码放在哪里?