無法根據 Thymeleaf 變量執行腳本<script th:inline=“javascript”>

Question

我有 2 個簡單的腳本和 2 個 Thymeleaf 變量，如果 thymeleaf 變量為真，我希望執行一個腳本，如果其他變量為真，則再次執行 - 要執行的相關腳本等等。 但是我得到以下結果 - 如果一個變量為真並且執行了腳本，那么即使第二個變量為真，第二個腳本也不會被執行。 所以很快，只執行了一個腳本，但需要兩個（按順序，不是同時）。 這是代碼：

    <script th:inline="javascript">
    var flag = [[${invalidInput}]]; //Thymleaf variable
    window.onload = function() {
        if(!flag)
            return; 
        openForm(); 
    };
</script>

<script th:inline="javascript">
    var flag = [[${exists}]];
    window.onload = function() {
        if(!flag)
            return;
        openForm();
    };
</script>



<!-- MODAL -->
<div class="form-popup" id="myForm">
    <form id="registration" th:action="@{/registrate}" th:object="${newUser}" method="post" class="form-container">
        <h1>Registration</h1>

        <div class="alert" th:if="${exists}">
            User already exists! Please try again.
        </div>

        <div class="invalidInput" th:if="${invalidInput}">
            Username or password too short.
        </div>
************************************************************
<script>
    function openForm() {
        document.getElementById("myForm").style.display = "block";
    }

@PostMapping("/registrate")
    public String login (@ModelAttribute(value = "newUser") User newUser, BindingResult bindingResult, Model model) {
        userValidator.validate(newUser, bindingResult);

         if(usrService.isUserPresent(newUser.getUsername())){
            model.addAttribute("exists",true);
            return "login";
        }
         else if(bindingResult.hasErrors()){
             model.addAttribute("invalidInput",true);
            return "login";
        }

Answer 1

我不認為你可以設置window.onload變量兩次......一個只會覆蓋另一個。 您可以像這樣組合您的邏輯：

<script th:inline="javascript">
  var invalidInput = [[${invalidInput}]]; //Thymleaf variable
  var exists = [[${exists}]];

  window.onload = function() {
    if(invalidInput) {
      openForm(); 
    } else if (exists) {
      openForm();
    }
  };
</script>

或者，您也可以使用 jQuery 之類的東西，它為您內置了此功能。

https://api.jquery.com/ready/

當通過連續調用此方法添加多個函數時，它們會在 DOM 准備就緒時按添加順序運行。