59447


大変お世話になっております。どうかご教授頂けませんでしょうか。

以下の様なphpのページ（site_a.php）がございます。このページは他のページから遷移され、そしてphpの処理をして約5秒後に他のページに自動で遷移していきます。

その約五秒の間、白の画面が表示されるのですが、javascriptのローディングの機能を自動発火する様に実装したいと考え、その下にある記述を追加いたしました。

しかしながら、機能しておりません。以前と同様に白の画面が表示され、約5秒後に次のページに遷移していきます。loadingのjavascript、あるいはそのための自動発火が機能していない様です。

このphpページでjavascriptのローディングがどうすれば機能するかお教え願いませんでしょうか？

尚、同様のローディングの機能はhtmlのページでは手動クリックの後に機能しております。

* * *

  * site_a.php

[code]

    <?php
    
    // phpのコーディング
    
    ?>
    
    <form action='xxxxxx.php' METHOD='POST'>
    <input type="submit" id="submit" value="" style="display:none;"/>   
    </form>
    
    <script>
    document.getElementById("submit").click();
    </script>   
    
[/code]

  * 上記の記述（site_a.php）にjavascriptのローディングの機能を自動発火する様な設定で追加。

[code]

    <html>
    <head>
    <body id="loading">
    </body>
    </head> 
    </html>
    
    <script> 
    
    $(function () {
      $("#loading").click( function() {
    
        // 処理前に Loading 画像を表示
        dispLoading("処理中...");
    
      });
    });
    
    
        function dispLoading(msg){
          // 引数なし（メッセージなし）を許容
          if( msg == undefined ){
            msg = "";
          }
          // 画面表示メッセージ
          var dispMsg = "<div class='loadingMsg' style='color:blue; padding:10px; 
        text-align:center'>" + msg + "</div>";
          // ローディング画像が表示されていない場合のみ出力
          if($("#loading").length == 0){
            $("body").append("<div id='loading' style='color:blue; padding:10px; 
        text-align:center'>" + dispMsg + "</div>");
          }
        }
    
    
    
            /* ------------------------------
             Loading イメージ削除関数
             ------------------------------ */
            function removeLoading(){
              $("#loading").remove();
            }
    
    
                }
    
        </script>
    
    <script>
    document.getElementById("loading").click();
    </script>
    
    <?php
    
    // phpのコーディング
    
    ?>
    
    <form action='xxxxxx.php' METHOD='POST'>
    <input type="submit" id="submit" value="" style="display:none;"/>   
    </form>
    
    <script>
    document.getElementById("submit").click();
    </script>   
    
[/code]

  * css

[code]

    #loading {
      display: table;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #fff;
      opacity: 0.8;
    }
    
    #loading .loadingMsg {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      padding-top: 140px;
      background: url("[LoadingイメージのURL]") center center no-repeat;
    }
    
[/code]


CC BY-SA 4.0
2019-10-03T15:02:26.073
59436
2019-10-10T09:15:18.077
2019-10-10T09:15:18.077
3475
19211
question
javascript php
遅いphpコード実行時に、処理中である旨をページ内に表示したい


疑問１  
「document.getElementById("loading").click();」は、「id="loading"」のついているDOMを読むはずだがHTMLには存在しない。

疑問２  
HTML中に書かれているPHPコードは今回5秒かかる処理のコードではない？（なら質問上で不要では？）  
Ajaxで通信している先のPHPが5秒処理がかかるという認識？

疑問３  
「dispLoading」という関数が呼び出されているが、その関数はどこ？  
表示されない原因がそもそも関数にある可能性もあるのでは？

疑問４  
同じく不明な関数「showMsg」「removeLoading」も同上。


CC BY-SA 4.0
2019-10-04T02:09:23.243
59446
2019-10-04T02:09:23.243
36063
59436
answer


ajaxでサーバに処理を依頼し処理結果を待ってからページ遷移すれば良いと思うのですが。

通常は、phpの処理が完了しないと画面が表示されません。（処理が完了するまで **HTML**
が出力されません）先にhtmlなどのデータを出力為には、phpで[出力バッファリング制御](https://www.php.net/manual/ja/book.outcontrol.php)を行います。  
以下にサンプルコードを

[code]

            <?php
            //header()などの初期処理を行う。
            ?>
        <!DOCTYPE html>
            <html>
            <head>
                <meta charset="UTF-8">
                <title>こんにちは！</title>
            </head>
            <body>
            こんにちは！しばらくお待ちください。
            </body>
            <?php
    $gonext = <<<eot
    <script type="text/javascript"> window.location.href='https://ja.stackoverflow.com/';
    </script>
    eot;
            echo str_pad(" ",4096);//ブラウザでバッファーリングされて直ぐに表示されない時は空白などを出力する。
            ob_end_flush();
            ob_start('mb_output_handler');
            ob_flush();
            flush();
            //サーバでそれなりの処理を行う。
    
            sleep( 5 ); // 時間がかかる処理１
            echo $gonext;
            ob_flush();
            flush();
            ?>
        </html>
    
[/code]

追記、phpから、htmlの任意の場所でjavascriptを実行させるには、javascriptを実行させたい場所にscriptタグで囲み出力することで、javascriptを実行させる事が出来ます。  
サンプルコードを 時間のかかる処理（sleepを入れています。）後、ページ遷移するように修正してみました。


CC BY-SA 4.0
2019-10-04T02:26:49.513
59447
2019-10-08T10:02:12.777
2019-10-08T10:02:12.777
22793
22793
59436
answer


サーバ側の処理とクライアント側の処理を混同してると思うのだがどうだろうか？  
サーバ側の処理が完了しドキュメントを生成するまではクライアント側へドキュメントは送信されない。  
まずはどの処理がどこで発生していてどのような流れでウェブページが表示されるのかを勉強した方が良い。既に回答にもある通りAjaxを利用して非同期通信を行うことが望ましいが、以上を前提として且つ処理中にドキュメントを送信する方法を模索しているのであれば以下の方法がある。

[code]

    <?php
        //処理直前までバッファ出力
        echo <<<EOB
    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        <div id='loading' style='color:blue; padding:10px;text-align:center'>
            <div class='loadingMsg' style='color:blue; padding:10px;text-align:center'>処理中...</div>
        </div>
    EOB;
        //送信させるためにバッファを溜める。
        //バッファが溜まっていないと出力されない。
        echo str_repeat( ' ', 1024 );
        //バッファを送信する。
        @ob_flush();
        @flush();
    
        //何かしらの処理
    
    ?>
        <script type="text/javascript">
            $("#loading").remove();
        </script>
    </body>
    </html>
    
[/code]


CC BY-SA 4.0
2019-10-10T06:59:39.440
59615
2019-10-10T06:59:39.440
36159
59436
answer