douaikuai2715
2018-10-26 13:07
浏览 236
已采纳

如何将onload()事件添加到laravel的@section('content')中

Is possible to do this? For example I have this code:

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

Or is it wrong of me to do that so? I'm working in Laravel and PHP. Or maybe using a Jquery function similar to the function in javascript.

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • douxiong1994 2018-10-26 13:37
    已采纳

    You must understand that @Section is a blade tag. Blade tags are processed inside PHP. Also, the blade syntax does not accept the parameter onload as you want.

    Also, either on HTML/JS you can't use onload as you want.

    You have two alternatives:

    1 - Put a script tag after the section:

    @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
    

    In this solution, the function will be called right after the browser loads this piece of html, but other parts of the html may not be loaded yet.

    2 - Put a script tag watching for the load event on document:

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

    The advantage of this method is that it will only be called after the entire page being loaded, so the order of the <script> tags doesn't matters (except that the jquery call must be after the jquery script tag.

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • doureng6738 2018-10-26 13:34

    Or, if you don't want to use jQuery and go for the native approach, you can use:

    document.addEventListener("DOMContentLoaded", function(event) {
      // do your stuff here
    });
    
    评论
    解决 无用
    打赏 举报
  • dsaob80228 2018-10-26 13:39

    IMHO is better if you divide HTML Markup and scripts using 2 sections eg:

     @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
    

    and in your layout place both sections

     <main class="container">
          <section id="content">
               @yield('content')
          </section>
     </main>
    
     <script type="text/javascript">
            $(function(){
                @yield('script')
            });
     </script>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题