在刷新网页之前加载 javascript

Question

这是我的 HTML 代码：<script src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap&v=quarterly" defer></script><script src="{% static '/javascript/maplanguage.js' %}"></script>       <form action="{% url 'set_language' %}" method="post">{% csrf_token %}            <input name="next" type="hidden" value="{{ redirect_to }}" />            <select id="sel_id" name="language" onchange="this.form.submit();">            {% get_current_language as LANGUAGE_CODE %}            {% get_available_languages as LANGUAGES %}            {% get_language_info_list for LANGUAGES as languages %}            {% for language in languages %}            <option class="option" value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected="selected"{% endif %} >                {{ language.name_local }} ({{ language.code }})            </option>            {% endfor %}            </select>    </form>这是为了使 Django 国际化（改变我的网页的语言）。现在我想同时更改我的 Google 地图 API 的语言。我试过这个。我的代码：#maplanguage.jsdocument.getElementById('sel_id').addEventListener('change', () => {        let lang = $(this).find('option:selected').val();//        console.log(lang);//        alert("You have selected the language code: " + lang);但问题是：当我从下拉列表中选择一个选项时，页面将立即刷新。然后我无法在 JS 中获取“lang”的值。[这意味着“警报”可以在刷新页面之前起作用，但是“console.log”没有任何内容。那么我怎么能让我的页面等待我的 JS 呢？

Answer 1

在您的 HTML 中，每次更改选择时都会提交您的表单。表单的提交意味着整个页面都会刷新，所以即使你改变了google map语言，页面刷新后它也会丢失。（除非您先将其存储在某个地方）。

有几种方法可以解决这个问题：

您应该让页面刷新并通过 Django 在 head 脚本中设置全局值，并使用它来设置 Google 地图的语言。

IE

<script>

var lang = {% currentLang %}

</script>

将 lang 设置为本地存储（或 cookie）后提交表单。然后当页面刷新时，lang从本地存储中获取并将其传递给谷歌地图。注意下面是一些伪代码，需要验证表单是否仍在该函数中提交。

IE

<script>

function onSelectChange() {

  var elem = document.getElementById('sel_id');

  var langValue = elem.options[elem.selectedIndex].value;

  localStorage.setItem('lang', langValue);

  this.form.submit();

}

</script>

<select onchange="onSelectChange">...

使用键从本地存储中获取值

<script>

var lang = localStorage.getItem('lang');

</script>