phpとjavascriptの連携。えらく苦労したが、やりたい動作ができた。こないだの失敗を踏まえて再挑戦。
やりたいのはこう。
サーバに動画ファイルがある。
自宅youbuteのような機能をphpで実装していて「mp4再生」ボタンを押せば観られる。
観たけどツマラナイ映像だった、削除したい としよう。
「ts削除JS」ボタンを押すと動画が(サーバ上から)消える。この削除ボタンを実装したい。
削除前に本当に削除していいか確認(confirm)画面が出るようにする。JavaScriptのconfirm()で出す。
この実装が難しかった。phpからjavascriptを呼び出す必要があるから。この連携が意外にめんどくさい。
該当部分のソースはこれ。
ポイント
・php内にjavascriptを書ける。body内のどこに書いてもOK。
・phpのprint文内にjavascriptを書いていくのが一番わかりやすい。
・ヒアストリングは見づらいので使わない。
・2336行目から2349行目までがjavascriptの内容。
・javascriptのconfirm()確認メッセージは function confirm_del(){} の中に閉じ込める。
・そのconfirm_del(){} 関数をformのonsubmitにセットしてやると、confirmの結果(YESかNoか)によって動作するしないを決定できる、つまりif文のような動きを実装できる。
動き
2362行目「ts削除JS」ボタンが押される(=submitされる)
2359行目 onsubmitにより関数confirm_del()が呼ばれる。
2336行目から2349行目により確認メッセージ(削除していいか)が出る。
YESかNoかを(if文のように)確認してその結果をreturnしてくれる。
2359行目 return結果がtrueだった場合のみ、doDEL.phpが呼び出される。
2360行目 doDEL.phpへのGETする引数DELTARGETはhidden要素で書く。
これを2359行目で "doDEL.php?DELTARGET="と書いても動作しない(?以降は無視されてしまう)。
確認
・javascriptが動かないときは confirm('')を確認する。
正) confirm('') シングルクオートが正しい
誤) confirm("") ダブルクオートは動かない
なお、doDEL.php はGETで受け取ったファイル名の動画をサーバ上から(問答無用で)削除する恐ろしい機能を持つ(削除はいつでも細心の注意が必要だ)。
ソース
2321 /// 削除ボタン実装 20200823
2322 /// if (preg_match('/.*ts$|.*TS$|.*ts.*part/', "$n")) {
2323 print ' ';
2324 if (file_exists("$n")) {
2325 /// $mp4name について、その元となった$n(tsファイル)がまだ存在しているなら削除ボタンを表示
2326 /// $n : wow_16916_20200815_053301.ts
2327 /// $mp4name: wow_16916_20200815_053301.ts.mp4
2328 ///// print '<mark>削除ボタンをここに実装する</mark>';
2329 print '<mark>ts:' . "$n" . '</mark>';
2330 print ' ';
2331 // print '<a href="doDELFILE.php?DELTARGET=' . rawurlencode("$n") . '" class="btn btn-danger" target="_blank">ts削除</a>';
2332
2333 ///// 削除実装<a href>でやる版 これは動く
2334 print '<a href="doDEL.php?DELTARGET=' . rawurlencode("$n") . '" class="btn btn-danger" target="_blank">ts削除</a>';
2335
2336 print '<script>';
2337 // print 'myANS1 = confirm("本当に削除しますか1?");';
2338 // print 'document.write(myANS1);';
2339 // print 'alert(\'javascript動いています\');'; // ダブルクオートで"javascript動いています"はダメ
2340 print 'function confirm_del() {';
2341 // print ' // var myANS2 = confirm("本当に' . "$n" . 'を削除しますか?';
2342 /// confirm('')はダブルクオートじゃダメ!何もエラー出さずに動かない!javascriptはエラー出さない!
2343 /// confirm("")は動かない!
2344 // print ' var myANS2 = confirm(\'本当に削除しますか2?\');';
2345 print ' var myANS2 = confirm(\'本当に' . "$n" . 'を削除しますか?\');';
2346 // print ' document.write(myANS2);';
2347 print ' return myANS2;';
2348 print '}';
2349 print '</script>';
2350
2351 // onsubmitによって、myANS2がtrueのときだけdoDEL.phpが実行される
2352 // onsubmitによって、if文と同じ効果が得られる(if YESだったらdoDEL.php実行)
2353 // print '<form style="display:inline" method="GET" action="doDEL.php" onsubmit="return confirm_del()">';
2354 // print '<form style="display:inline" target="_blank" class="btn btn-danger" method="GET" action="doDEL.php?DELTARGET="' . r awurlencode("$n") . '" onsubmit="return confirm_del()">';
2355
2356 // formのときに doDEL.php?DELTARGET=はダメ。パラメータは必ずhiddenで投げる
2357 // ↑これだとGETはdoDEL.php?後ろ空白 になってしまう。
2358 // print '<form style="display:inline" method="GET" action="doDEL.php?DELTARGET=' . rawurlencode("$n") . '" onsubmit="return confirm_del()">';
2359 print '<form style="display:inline" method="GET" action="doDEL.php" onsubmit="return confirm_del()">';
2360 print '<input type="hidden" name="DELTARGET" value="' . "$n" . '">';
2361 // print ' <input type="submit" value="削除実行">';
2362 print ' <input type="submit" value="ts削除JS" class="btn btn-danger" target="_blank"/></a>';
2363 print '</form>';
2364
2365 /// 命名規則
2366 // do:ファイル名に付ける:doDEL.php
2367 // go:関数の名前に付ける:goDEL() や goRM()
2368 ///
2369 /// phpからjavascriptを呼び出す hear_string_ヒアストリング利用
2370 /// 画面遷移でポップアップconfirm確認画面出すのによく使いそう
2371 /// https://so-zou.jp/web-app/tech/programming/php/sample/javascript-cooperation.htm
2372 // goRM(TARGET,COMFIRM);
2373 // goRM(TARGET);
2374 // print '<a href="doLSglob.php?RM=YES" class="btn-danger">削除test</a>';
2375
2376 } else {
2377 print '<mark>削除対象tsなし</mark>';
2378 }
2379
2380 print ' ';