7

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

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

4

5 回答 5

2

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

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

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

于 2013-08-30T21:27:55.323 回答
1

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

于 2015-02-28T02:12:12.050 回答
1

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

好的，这就是我所做的。我将 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”的方式来完成。

但它奏效了。

于 2014-11-08T01:26:38.507 回答
1

确实，目前还没有正式的方法来做到这一点，但是有一些有效的方法可以做到这一点。以我如何将 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 中。希望这可以帮助。

于 2015-06-16T15:13:37.220 回答
0

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

在您的 JavaScript 文件（我们将其称为“test.js”）中，使用以下内容包装整个内容：

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

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

import test from './test.js'

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

test();

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

于 2016-06-09T12:29:12.893 回答