Question

我在我的网站上使用Rain.tpl模板引擎。我现在有一个变量（$ username），我可以在{$username}的常规html文件中使用它。这很好用。

我现在想在一个单独的.js文件中使用这个相同的变量，我使用<script src="/js/MySeparateJsFile.js"></script>加载到thml文件中。我尝试在其中使用{$username}，但这似乎不起作用。所以我想用javascript在html文件中设置它，但我不知道我怎么能这样做。

有人知道如何将html文件中的javascript变量插入到.js文件方法中吗？欢迎所有提示！

Answer 1

在Rain.tpl文件中，将用户名声明为js全局变量，如window.username。在MySeparateJsFile.js文件

中使用此全局变量

<强> Rain.tpl

<script>
window.username = "{$username}";
</script>

js文件

var username = window.username;

Answer 2

在您的html文件中，正下方代码：

<script> var username= "{$username}";</script>

现在可以在你的js文件中访问变量用户名

Answer 3

默认情况下，只会处理和执行.php个文件。通常，您可以将任何变量作为JavaScript变量输出到模板中，以便所有外部JavaScript文件都可以访问它们。

如果您有多个变量，最好的方法是在PHP端对JSON进行编码，并将原始结果输出到JavaScript中：

<?php
$user = array('username' => $username, 'userId' => $userId);
$userJson = json_encode($user);

在模板中

<script>
    var user = {$userJson};
</script>

注意通过模板引擎输出JSON时，必须确保它输出原始数据，而不是使用任何过滤器（例如htmlspecialchars()）。

现在，在外部JavaScript或任何页面JavaScript上，您可以访问变量：

console.log( user.username );
console.log( user.userId );

JSON编码方法解决了两个问题：

防止XSS漏洞，因为任何恶意内容都将被JSON编码引擎转义。
可以为您的应用程序分组大量变量或使用命名空间。

Answer 4

向脚本添加数据属性

<script id="myscript"  data-username="{$username}" src="/js/MySeparateJsFile.js"></script>

并从您的javascript访问它：

var username = document.getElementById("myscript").getAttribute("data-username");

如何使用javascript从html文件中插入js文件中的变量？

4 个答案: