Question

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

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

Answer 1

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

如果您遇到错误，可能是错误的代码结构。有些方法只有在需要时才能执行代码 - 您应该查看template.rendered和template.created回调以及铁路由器控制器。但是，这是执行 - 一切都在开头加载。

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

Answer 2

警告：不是最佳解决方案

好的，这就是我的所作所为。我把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" />');
});

虽然这不是最好的方法，但这可以在一个＆＃34; hacky＆＃34;方式。

但它奏效了。

Answer 3

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

Answer 4

确实，这还不是官方的做法，但有一些有效的方法可以做到这一点。举例来说，我如何将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中的子节点附加。希望这会有所帮助。

Answer 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，但原理是一样的。

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

5 个答案: