AEM6（CQ）通过模板将变量通过模板传递给javascript

Tom Maton 发表于 Dev

汤姆·莫顿

我正在使用AEM6中的新视觉语言通过模板渲染组件，在组件中有一个视频使用JWPlayer插件，该视频需要以下代码来初始化视频：

<div id='playerpwSIOjcRZrCa'></div>
<script type='text/javascript'>
    jwplayer('playerpwSIOjcRZrCa').setup({
        file: '//www.youtube.com/watch?v=123456',
        title: 'Video title',
        width: '100%',
        aspectratio: '16:9'
    });
</script>

但是我想使Youtube变量动态化，以便用户可以在作者中更改ID，因此将以下模板传递给videoPath（youtube id）：

<template data-sly-template.player="${@ videoPath}">

    Video Id: ${videoPath}

    <script src="//jwpsrv.com/library/HjcD1BZoEeS7ByIAC0MJiQ.js"></script>

    <div id='playerpwSIOjcRZrCa'></div>
    <script type='text/javascript'>
        jwplayer('playerpwSIOjcRZrCa').setup({
            file: '//www.youtube.com/watch?v=' ${videoPath},
            title: 'Video title',
            width: '100%',
            aspectratio: '16:9'
        });
    </script>

</template>

我遇到的问题是，标记中的$ {videoPath}无法呈现ID（与模板顶部的ID相同）。

有没有办法使用美观的模板解决此问题？

托梅克·伦克

视觉上包含开箱即用的XSS保护。它检测到您正在尝试将videoPath变量注入<script>标签内，并且需要指定context，因此可以转义特殊字符。在这种情况下，应该是scriptString上下文：

<script type='text/javascript'>
    jwplayer('playerpwSIOjcRZrCa').setup({
        file: '//www.youtube.com/watch?v=${videoPath @ context="scriptString"}',
        title: 'Video title',
        width: '100%',
        aspectratio: '16:9'
    });
</script>

可以在Adobe文档中找到更多信息。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。