Как добавить событие onload () в @section ('content') laravel

Question

Возможно ли это сделать?Например, у меня есть этот код:

@section('content' onload='MyFunction')
  <!--PAGE CONTENT...-->
  <div>
   <h1>Something...</h1>
   <select name="sel"></select>
  </div>
@endsection

<script type="text/javascript">

  function MyFunction(){

   obj = document.forms[0].sel;

   for (i=0; i<23; i++) {

    //A similar condition to onload() event.

  }
</script>

Или это неправильно с моей стороны?Я работаю в Laravel и PHP.Или, может быть, используя функцию Jquery, аналогичную функции в JavaScript.

Answer 1

Вы должны понимать, что @Section является меткой лезвия. Блейд-теги обрабатываются внутри PHP. Кроме того, синтаксис блейда не принимает параметр onload так, как вы хотите.

Также в HTML / JS вы не можете использовать onload так, как хотите.

У вас есть две альтернативы:

1 - Поставить тег сценария после раздела:

@section('content')
  <!--PAGE CONTENT...-->
  <div>
   <h1>Something...</h1>
   <select name="sel"></select>
  </div>
  <script>
    // Note that this function must have been declared before
    // this script tag, otherwise it will log an error:
    // "Uncaught ReferenceError: MyFunction is not defined"
    MyFunction(); 
  </script> 
@endsection

В этом решении функция будет вызываться сразу после загрузки браузером этого фрагмента html, но другие части html могут быть еще не загружены.

2 - Поместить тег сценария для наблюдения за событием load в документе:

<script>
    $(document).load(function() {
        MyFunction(); 
    });
</script>

Преимущество этого метода в том, что он будет вызываться только после загрузки всей страницы, поэтому порядок тегов <script> не имеет значения (за исключением того, что вызов jquery должен быть после тега сценария jquery.

Answer 2

ИМХО лучше, если вы разделите HTML-разметку и сценарии, используя 2 раздела, например:

 @section('content')
     <!--PAGE CONTENT...-->
     <div>
         <h1> Something ... </h1>
         <select name="sel"></select>
     </div>
     <script type="text/javascript">
     function MyFunction(){
         obj = document.forms[0].sel;
         for (i=0; i<23; i++) {
             //A similar condition to onload() event.
         }
     }     
    </script>
 @endsection
 @section('script')
     MyFunction();
     // every script here will run onload
 @endsection

и в вашем макете разместите оба раздела

 <main class="container">
      <section id="content">
           @yield('content')
      </section>
 </main>

 <script type="text/javascript">
        $(function(){
            @yield('script')
        });
 </script>

Answer 3

Или, если вы не хотите использовать jQuery и использовать нативный подход, вы можете использовать:

document.addEventListener("DOMContentLoaded", function(event) {
  // do your stuff here
});