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

时间:2014-05-12 11:20:32

标签: javascript php jquery html

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

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

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

4 个答案:

答案 0 :(得分:1)

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

中使用此全局变量

<强> Rain.tpl

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

js文件

var username = window.username;

答案 1 :(得分:0)

在您的html文件中,正下方代码:

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

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

答案 2 :(得分:0)

默认情况下,只会处理和执行.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编码引擎转义。
  • 可以为您的应用程序分组大量变量或使用命名空间。

答案 3 :(得分:0)

向脚本添加数据属性

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

并从您的javascript访问它:

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