在 SilverStripe 中的页脚之后插入 JavaScript答案

【问题标题】：JavaScript inserted after the footer in SilverStripe在 SilverStripe 中的页脚之后插入 JavaScript
【发布时间】：2015-11-17 01:47:50
【问题描述】：

为什么我的 JavaScript 出现在页脚之后？下面是我在布局中的代码（Page.ss）：

<% include SideBar %>
<div class="content-container unit size3of4 lastUnit">
    <article>
    <h1>$Title</h1>
        <div class="content">
            <script type="text/javascript">
                window.onload = function() {
                    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
                    function preload() {
                        game.load.image('logo', 'phaser.png');
                    }
                    function create() {
                        var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo');
                        logo.anchor.setTo(0.5, 0.5);
                    }
                };
            </script>
        </div>
    </article>
    $Form
    $CommentsForm
</div>

【问题讨论】：

标签： javascript silverstripe phaser-framework

【解决方案1】：

默认情况下，SilverStripe 在页面正文底部包含所有 JavaScript 文件。这是为了允许在加载任何 JavaScript 之前加载所有其他网站资源。

如果您在布局或包含模板中有脚本标签，它会将脚本移动到正文标签的底部。

如果您不想移动脚本标签，您可以在Page_Controller init() 函数中使用set Requirements.write_js_to_body to false：

class Page_Controller extends ContentController {

    public function init() {
        parent::init();

        Requirements::set_write_js_to_body(false);
    }

}

请注意，这会将您的所有需求包括 JavaScript 文件移动到 <head> 标记。

【讨论】：

我添加了Requirements::set_write_js_to_body(false);在 _config.php 中，我的 javascript 输出仍然出现在页面底部？谢谢。
我已经对此进行了测试，它对我有用。在您的配置中，您可以输入die('Hello'); 来测试该行是否被调用？
似乎正在调用Requirements::set_write_js_to_body(false)。但是 Javascript 输出仍然在底部？
在您的 Page.php 文件中尝试一下，在 Page_Controller 类下的公共函数 init() 部分中
@user3257693 - 感谢您的反馈。我已根据您的建议编辑了我的答案。

【解决方案2】：

如果您想要更多控制权，另一种选择是使用：https://gist.github.com/markguinn/683ab8b22891632be6e5

然后将以下内容添加到 Page_Controller::init 或 mysite/_config.php:

Requirements::set_backend(new BetterRequirementsBackend());

并添加：

<!-- INSERT JS HERE -->

和

<!-- INSERT CSS HERE -->

到您的模板。通过这种方式，您可以准确控制注射发生的位置。请注意，您可能希望在上面的类中将第 23 行更改为 = false 或在 yaml 配置中覆盖它。

【讨论】：