使用外部脚本检索输入字段后设置值（HTML dom refresh？）

Question

我想做什么

使用外部脚本获取表单。预填充并禁用某些字段。例如：

我是怎么做的

我使用外部脚本检索表单：

<!-- Lumesse js imports -->
<!--Apply-->
<script type="text/javascript"
    src="https://emea3.recruitmentplatform.com/apply-app/static/apply/release/2-LATEST/apply-preloader-namespaced.js"
    th:src="@{https://emea3.recruitmentplatform.com/apply-app/static/apply/release/2-LATEST/apply-preloader-namespaced.js}"
    data-lumesse-apply=""
    data-lumesse-apply-config-key="XXX"
    data-lumesse-apply-host="https://emea3.recruitmentplatform.com"
    data-lumesse-apply-description-placement="bottom"
    data-lumesse-apply-menu="top"
    data-lumesse-apply-menu-placement="top"
    data-lumesse-apply-repeatable-style="on-demand">        
</script>
<script src="https://emea3.recruitmentplatform.com/apply-
 app/static/apply/release/2-LATEST/apply-application-form-namespaced.js"
    th:src="@{https://emea3.recruitmentplatform.com/apply-
app/static/apply/release/2-LATEST/apply-application-form-namespaced.js}">
</script>
<!-- in comment because otherwise conflict with static/vendor/jquery.min.js -->
<!-- <script src="https://code.jquery.com/jquery-1.12.3.min.js"
    th:src="@{https://code.jquery.com/jquery-1.12.3.min.js}"
    th:integrity="sha" 
th:crossorigin="anonymous"></script>-->
<script src="https://emea3.recruitmentplatform.com/apply-
app/static/themes/release/latest/silk/js/main.js"
    th:src="@{https://emea3.recruitmentplatform.com/apply-
app/static/themes/release/latest/silk/js/main.js}"></script>

预填或禁用的代码工作正常。：

<!-- custom javascript -->
<script type="text/javascript" th:inline="javascript" >

$(document).ready(function() {
// fix menu when passed
$('.masthead').visibility({
    once : false,
    onBottomPassed : function() {
        $('.fixed.menu').transition('fade in');
        $('.navbar-fixed-top').css({'top': '52px'});
    },
    onBottomPassedReverse : function() {
        $('.fixed.menu').transition('fade out');
        $('.navbar-fixed-top').css({'top': '75px'});
    }
});
// create sidebar and attach to menu open
$('.ui.sidebar').sidebar('attach events', '.toc.item');

window.setTimeout(function(){
    preFillForm();
    },0);
});

function preFillForm(){
    var gegevens = [[${gegevens}]];
    for(var id in gegevens){
        $("#" + id).val(gegevens[id]);
    }
    $("#first_name_1").attr('disabled','disabled');
    $("#last_name_2").attr('disabled','disabled');
    $("#e-mail_address_3").attr('disabled','disabled');
}
</script>

问题

我的字段没有预先填充..我的猜测是因为它们没有被重新加载或被覆盖..

第一种可能的解决方案

经过几个小时后，我添加了一个0的setTimeout。这似乎有效。现在我发现这只适用于页面刷新或用户已经访问过该站点并在页面刷新之前... 因此，当用户第一次访问该网站时，它仍无法正常工作..

非常感谢任何帮助 干杯

（PS：更多秒的setTimeout不是我想要的方式..）

已更新

我的应用程序是一个Spring Boot应用程序。与Thymeleaf合作。在FrontEnd中也使用Semantic和Jquery。

Answer 1

尝试使用sessionStorage或localStorage（在这种情况下，sessionStorage似乎更好）。

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage