在刷新网页之前加载 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.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 中获取“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() {&nbsp; var elem = document.getElementById('sel_id');&nbsp; var langValue = elem.options[elem.selectedIndex].value;&nbsp; localStorage.setItem('lang', langValue);&nbsp; this.form.submit();}</script><select onchange="onSelectChange">...使用键从本地存储中获取值<script>var lang = localStorage.getItem('lang');</script>