0

我在主干/下划线应用程序中遇到问题。我们的网站使用recaptcha，我们希望将该内容放入视图中。我们在模板中使用下划线。我如何将 recaptcha 代码放入模板中？问题是recaptcha 需要脚本标签，它与下划线脚本标签冲突。例如，它看起来像这样：

<script type="text/javascript" id="someTemplate">
<div>
    some html here
</div>
<script type="text/javascript"  src="https://www.google.com/recaptcha/api/challengek=YOUR_PUBLIC_KEY"

  

  </script>

任何帮助表示赞赏。谢谢！

4

3 回答 3

1

下划线不会阻止您使用脚本标签，您的问题来自您的模板声明：您使用type="text/javascript"这意味着您的浏览器会尝试将您的模板解释为 Javascript，并且您会得到不稳定的结果。

尝试

<script type="text/template" id="someTemplate">
    <div><%= text %></div>
    <script type="text/javascript"  
            src="https://www.google.com/recaptcha/api/challengek=<%= key %>"
    />
</script>

和一个演示http://jsfiddle.net/VxjBs/

正如您在评论中指出的那样，Recaptcha 尝试通过加载第二个脚本document.write并在插入 DOM 时失败（请参阅无法附加 <script> 元素以获得可能的解释）。

您最好的选择可能是通过Recaptcha Ajax API，生成您的 HTML，识别一个节点并Recaptcha.create在其上应用。就像是

<script type="text/template" id="someTemplate">
    <div><%= text %></div>
    <div class='recaptcha'></div>
</script>

观点的基础可能是

var html = _.template(src, {
    text: 'in div'
});

var $el = $('#render').append(html);
$el.find('.recaptcha').each(function(idx, el) {
    Recaptcha.create(
        pubkey,
        el
    );
});

http://jsfiddle.net/nikoshr/VxjBs/2/

于 2013-06-18T04:45:29.647 回答
0

不确定所有 reCAPTCHA 脚本的作用，但我假设它会尝试在自身之后附加 HTML。如果是这种情况，那么您可能需要在渲染视图后手动将脚本节点附加到视图，然后将src脚本节点的设置为外部 javascript 文件的 URL。

您不能将脚本标签放在下划线模板中，因为浏览器只会解析最外层的脚本标签（您的模板）。

于 2013-06-17T21:19:42.317 回答
0

建议的解决方案太复杂了。这可以很容易地实现如下（实际上我刚刚在我的项目中实现了它）。

确保在页面的“head”元素中包含 recaptcha js 文件，如下所示：

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

在您的 javascript 中的某处添加此功能。

var render_recaptcha = function(target_id) {
    grecaptcha.render(target_id, {
      'sitekey' : RECAPTCHA_SITE_KEY
    });
};

然后，只需在渲染模板后调用此函数：

<script type="text/template" id="someTemplate">
    <div><%= text %></div>
    <div id='recaptcha'></div>
</script>

//render template like you usually would
//...
//then render the recaptcha
render_recaptcha('recaptcha');

而已。

于 2020-11-14T15:38:41.003 回答