如何在我的 HTML 中使用来自外部 .js 文件的变量？答案

【问题标题】：How can I use a variable from an external .js file in my HTML?如何在我的 HTML 中使用来自外部 .js 文件的变量？
【发布时间】：2011-11-08 12:46:33
【问题描述】：

我已经编写了一个函数，它根据浏览器语言填充 URL（包含图像）。然后将这个后续 URL 写入一个变量。所有的图片都是基于语言的，所以对于德国来说是“de.gif”，法国是“fr.gif”等等。

我的问题是如何在我的 HTML 页面中调用这个变量？

为了帮助我更好地说明这个问题，这里是 JavaScript，请注意这是在这个 HTML 页面中调用的外部 .js 文件：

function IABEU_moused_detect() {
(function IAB_lang_detect() {"use strict";
var IAB_lang_map = {"de-at": "at","nl-be": "be-nl","fr-be": "be-fr","da": "den","de": "de","hu": "hu","en-ie": "ie","ga": "ie","es": "es","fr": "fr","it": "it","nl": "nl","no": "nor","pl": "pl","en": "uk","en-GB": "uk","en-US": "uk","en-gb": "uk","en-us": "uk"},
IAB_lang = (navigator && navigator.browserLanguage) || (window.navigator && window.navigator.language) || "en-GB";
IAB_url = ("http://www.someurl.com/" + IAB_lang_map[IAB_lang]);
IAB_img = ("http://www.myimagesarehere.com/" + IAB_lang_map[IAB_lang]+".gif");
}());}

所以这是我想在我的 HTML 页面中调用的 IAB_img 变量（它是 .js 文件中的全局变量）

HTML 在这里：

<div>
  <img src="HERE IS WHERE I WANT TO call the variable 'IAB_img'"> 
</div>

谢谢

编辑：所以我仍然无法解决这个问题，有没有办法让我使用“IAB_img”中的值作为我的 HTML 文件中的图像 src？

【问题讨论】：

提供本地化内容的更合适的方法是检查 Accept-Language HTTP 标头。可以通过 Javascript 检查的 broser 语言属性反映的是浏览器安装时使用的语言，而不是用户的首选语言。
我知道这是真的。但我不能做这个服务器端，所以我被要求在客户端实现它。我意识到这是一种“肮脏”的做法，但我别无选择
你能编辑 HTML 还是只编辑 JavaScript？
我也可以编辑 HTML。

标签： javascript html function variables

【解决方案1】：

我会先给图像一个 id。

<div>
    <img id="TheImage" src="HERE IS WHERE I WANT TO call the variable 'IAB_img'"> 
</div>

然后在你的 JavaScript 函数中，像这样分配图像的 src：

function IABEU_moused_detect() {
    (function IAB_lang_detect() {"use strict";
        var IAB_lang_map = {"de-at": "at","nl-be": "be-nl","fr-be": "be-fr","da": "den","de": "de","hu": "hu","en-ie": "ie","ga": "ie","es": "es","fr": "fr","it": "it","nl": "nl","no": "nor","pl": "pl","en": "uk","en-GB": "uk","en-US": "uk","en-gb": "uk","en-us": "uk"},
        IAB_lang = (navigator && navigator.browserLanguage) || (window.navigator &&   window.navigator.language) || "en-GB";
        IAB_url = ("http://www.someurl.com/" + IAB_lang_map[IAB_lang]);
        IAB_img = ("http://www.myimagesarehere.com/" + IAB_lang_map[IAB_lang]+".gif");
        var image = document.getElementById('TheImage');
        image.src = IAB_img;
}());}

【讨论】：

感谢@ptfaulkner，但我认为这并没有达到我所追求的目标。我需要图像的 src 是位于变量“IAB_img”中的字符串。
尝试在 HTML 代码的 img src 中放置一个占位符 url。也许有一个错误阻止了 JavaScript 中 src 的分配。您可能还想在一行中尝试分配，例如： document.getElementById('TheImage').src = IAB_img;
非常感谢@ptfaulkner。我已经把它放在了一行 :) 当我签入萤火虫时，我只收到错误“无法加载给定的 URL）..
这听起来像 IAB_img 变量中的 url 不正确。它在萤火虫中看起来正确吗？
@Kiz 如果image 的值为空，那么document.getElementById 没有获取到元素。您确定 id 完全匹配，并且脚本仅在加载 DOM 后运行？（即，将您的脚本放在window.onload 事件处理程序中或将<script> 元素放在<body> 的末尾）

【解决方案2】：

您是否通过模板呈现 html 页面？如果是这样，您可以包含一个带有变量设置的 javascript sn-p，以便进一步阅读：

<script type="text/javascript">
  var IAB_img = {{value}};
</script>

只需在加载其他脚本之前放置它，然后就会为您定义 IAB_img。

【讨论】：

谢谢 - 但它不是通过模板完成的。上面的答案解决了它（经过我的深思熟虑），但同样感谢

【解决方案3】：

类似这样的：

<div>
 <img src="javascript:document.write(IAB_img);" />
</div>

【讨论】：

这是完全错误的。内联 JavaScript 仅在它位于内联事件处理程序（如 onclick）中时才被调用，src 肯定不是
所以@Yi Jiang 是我想要实现的目标吗？