Javascript 如何在自己的Typo3 6.2扩展名中包含.js文件？

我用ExtensionBuilder、extbase和fluid在Typo36.2中做了一个扩展。 我想在前端添加一个时间选择器。 我在网上找到了一个.js文件，希望在扩展名处于活动状态时包含它，因为我经常需要它。 我把这个文件放在这里：EXT:/Resources/Public/JS/timepicker.JS。 我在文章中看到了一个解决方案，但添加了

page.includeJS.tx_myExtension=EXT:/Resources/Public/JS/timepicker.JS

在我的setup.txt的底部，它不工作

我没有在那里定义页面，所以我想这可能是原因，但我真的不知道-这是我在/typo3conf/ext//Configuration/TypoScript/中自动生成的setup.txt：

最终，我希望我的前端函数能够工作，因为我在根模板中包含了jQuery，它已经可以与datepicker一起工作了。但是我不想把时间选择器包括在里面，只是为了我的扩展

<script>
    $(function () {
        $('.lc-datepicker').datepicker();
        $('.lc-timepicker').timepicker();
    });
</script>

---

您可以使用EXT:的正确语法，如下所示：

page.includeJS.myextension = EXT:extkey/Resources/Public/JS/timepicker.js

你忘带钥匙了

请记住，使用IncludeJSooter而不是includeJS可能会提高网站的性能

page.includeJS是一个全局可用的打字脚本属性。因此，如果您在站点的根TS模板中使用该插件，则无论插件是否正在使用，JavaScript文件都将嵌入到每个页面。因此，如果您只想在嵌入了插件的页面上使用JS，我建议使用下面的Fluid方法

要实现此目的，请在模板中使用资源ViewHelper：

<script src="{f:uri.resource(path: 'JS/timepicker.js')}"></script>
<script>
    $(function () {
        $('.lc-datepicker').datepicker();
        $('.lc-timepicker').timepicker();
    });
</script>

---

Resource ViewHelper使用相对于扩展的Resources/Public目录的路径。

您可以对EXT:使用正确的语法，如下所示：

<script>
    $(function () {
        $('.lc-datepicker').datepicker();
        $('.lc-timepicker').timepicker();
    });
</script>

page.includeJS.myextension = EXT:extkey/Resources/Public/JS/timepicker.js

你忘带钥匙了

请记住，使用IncludeJSooter而不是includeJS可能会提高网站的性能

page.includeJS是一个全局可用的打字脚本属性。因此，如果您在站点的根TS模板中使用该插件，则无论插件是否正在使用，JavaScript文件都将嵌入到每个页面。因此，如果您只想在嵌入了插件的页面上使用JS，我建议使用下面的Fluid方法

要实现此目的，请在模板中使用资源ViewHelper：

<script src="{f:uri.resource(path: 'JS/timepicker.js')}"></script>
<script>
    $(function () {
        $('.lc-datepicker').datepicker();
        $('.lc-timepicker').timepicker();
    });
</script>

---

Resource ViewHelper使用相对于扩展的Resources/Public目录的路径。

您可以定义在控制器类中包含JS，以确保它仅为扩展加载

<script>
    $(function () {
        $('.lc-datepicker').datepicker();
        $('.lc-timepicker').timepicker();
    });
</script>

在TypoScript中，要配置JS文件：

plugin.tx_myext.settings.javascript.file = EXT:myext/Resources/Public/JS/timepicker.js

在控制器操作中：

$this->response->addAdditionalHeaderData('<script src="' .
            $GLOBALS['TSFE']->tmpl->getFileName($this->settings['javascript']['file']) .
            '" type="text/javascript"></script>');

---

您可以定义在控制器类中包含JS，以确保它只为您的扩展加载

<script>
    $(function () {
        $('.lc-datepicker').datepicker();
        $('.lc-timepicker').timepicker();
    });
</script>

在TypoScript中，要配置JS文件：

plugin.tx_myext.settings.javascript.file = EXT:myext/Resources/Public/JS/timepicker.js

在控制器操作中：

$this->response->addAdditionalHeaderData('<script src="' .
            $GLOBALS['TSFE']->tmpl->getFileName($this->settings['javascript']['file']) .
            '" type="text/javascript"></script>');

---

它现在不工作-对于page.includeJSFooter.tx_myExtension=EXT:tx_myExtension/Resources/Public/JS/timepicker.JS，我必须刷新哪个缓存才能确保它不是因为前端、常规还是系统？到底是哪个扩展名的意思，它是在哪里定义的？不是插件名，对吧？你的第二个例子终于成功了…但奇怪的是：我必须从JS/开始。。。不是公共的，否则输出是公共的/公共的希望我能找出您的第一个解决方案有什么问题…对不起，我的错，off中的路径：uri.resource VH与Resources/Public相对。修好了。我还将myextension更改为extkey，以强调需要扩展键，该扩展键等于typo3conf/ext中的扩展目录。除了正常的页面缓存，您不需要删除任何其他内容。请尝试查看后端的打字脚本树，以了解您的TS是否正确应用。好的，谢谢您的更正-因此，如果extkey=扩展目录，那么页面中的myextension是什么。includeJS.myextension？我编辑了这个问题。根据您的需要，使用我个人不喜欢的流体方法或jokumer的方法。它现在不起作用-使用page.includeJSFooter.tx_myExtension=EXT:tx_myExtension/Resources/Public/JS/timepicker.JS我必须刷新哪个缓存才能确保它不是因为前端、通用还是系统？到底是哪个扩展名的意思，它是在哪里定义的？不是插件名，对吧？你的第二个例子终于成功了…但奇怪的是：我必须从JS/开始。。。不是公共的，否则输出是公共的/公共的希望我能找出您的第一个解决方案有什么问题…对不起，我的错，off中的路径：uri.resource VH与Resources/Public相对。修好了。我还将myextension更改为extkey，以强调需要扩展键，该扩展键等于typo3conf/ext中的扩展目录。除了正常的页面缓存，您不需要删除任何其他内容。请尝试查看后端的打字脚本树，以了解您的TS是否正确应用。好的，谢谢您的更正-因此，如果extkey=扩展目录，那么页面中的myextension是什么。includeJS.myextension？I edi

---

他回答了这个问题。根据您的需要，使用我个人不喜欢的流体方法或jokumer方法。但是我可以将打字脚本添加到扩展名文件夹中的setup.txt文件中吗？到目前为止，它还不起作用：它确实加载了我写的plugin.tx_myext.settings.javascript.file=EXT:myext/Resources/Public/JS/timepicker.JS的一个空头，就像你说的那样。这个解决方案的缺点是它在某种程度上是不灵活的——如果脚本以其他方式加载（例如在全局中），则需要更改代码但是我可以将打字脚本添加到扩展名文件夹中的setup.txt文件中吗？到目前为止，它还不起作用：它确实加载了我写的plugin.tx_myext.settings.javascript.file=EXT:myext/Resources/Public/JS/timepicker.JS的一个空头，就像你说的那样。这个解决方案的缺点是它在某种程度上是不灵活的——如果脚本以其他方式加载（例如在全局中），则需要更改代码上下文