如何使用javascript将一个变量从html文件插入到js文件中

How to insert a variable in a js file from a html file using javascript?

本文关键字：文件 html 插入 js 变量 一个 javascript 何使用      更新时间：2023-09-26

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

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

有人知道我如何从html文件中插入一个javascript变量到。js文件方法吗?欢迎所有的建议!

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

中使用这个全局变量

Rain.tpl 

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

js文件

var username = window.username;

在你的html文件中，下面的代码:

<script> var username= "{$username}";</script>
现在变量username就可以在js文件中访问了

默认情况下只处理和执行.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编码引擎转义。
  • 可以对很多变量进行分组，或者为你的应用程序使用一个命名空间。

为脚本添加data属性

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

并从javascript中访问它:

var username = document.getElementById("myscript").getAttribute("data-username");
相关文章：