Как я могу использовать переменную из внешнего файла .js в моем HTML?

Question

У меня есть написанная функция, которая заполняет URL (который содержит изображение) на основе языка браузера. Этот последующий URL-адрес затем записывается в переменную. Все изображения основаны на языке, поэтому для Германии это будет "de.gif", для Франции будет "fr.gif" и т. Д.

Мой вопрос: как я могу вызвать эту переменную на моей HTML-странице?

Чтобы помочь мне лучше проиллюстрировать эту проблему, вот JavaScript, обратите внимание, что это ВНЕШНИЙ файл .js, вызываемый на этой HTML-странице:

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");
}());}

Так что это переменная IAB_img, которую я хочу вызвать на моей HTML-странице (это глобальная переменная в файле .js)

HTML-код здесь:

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

Спасибо

РЕДАКТИРОВАТЬ: Таким образом, я до сих пор не могу решить эту проблему, есть ли способ использовать значение в "IAB_img" в качестве src изображения в моем HTML-файле?

Answer 1

Я бы начал с присвоения изображению идентификатора.

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

Затем в функции JavaScript просто назначьте источник изображения следующим образом:

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;
}());}

Answer 2

Вы рендеринг HTML-страницы с помощью шаблона?Если это так, вы можете включить фрагмент javascript с настройкой переменной для дальнейшего чтения:

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

Просто поставьте это перед загрузкой другого скрипта, и тогда IAB_img уже будет определен для вас.

Answer 3

Примерно так:

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