在刷新网页之前加载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国际化(改变我的网页语言(。

现在我想同时更改我的谷歌地图api的语言。

我试过这个。我的代码：

#maplanguage.js
document.getElementById('sel_id').addEventListener('change', () => {
let lang = $(this).find('option:selected').val();
//        console.log(lang);
//        alert("You have selected the language code: " + lang);

但问题是：当我从下拉列表中选择一个选项时，页面将立即刷新。然后我就无法得到"；郎；在JS中。[这意味着"警报"可以在刷新页面之前工作，但"console.log"没有任何内容。

那么，我怎么能让我的页面等待我的JS呢？

Answer 1

在HTML中，每次更改选择时，表单都会提交。表单的提交意味着整个页面将刷新，因此即使您更改了谷歌地图语言，它也会在页面刷新后丢失。(除非你先把它存放在某个地方(。

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

1. 您应该让页面刷新，并通过Django在头脚本中设置一个全局值，并使用它来设置谷歌地图的语言

即

<script>
var lang = {% currentLang %}
</script>

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

即

<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>