[jQuery] htmlファイル内でphpを部分的に動作させる
htmlの拡張子をphpに変える、でもなく、
.htaccessでhtmlファイルをphpとして振舞わせる、でもなく、
純粋にhtmlファイル内でphpで出力された物を表示する方法を考えてみました。
前提条件
- .htmlの特定部分に.phpで書いた物を入れたい。
- 「.htaccess」はさわらない。
- jQueryに頼る事ができる状況。
アプローチとして考えられるもの
- iframeで表示
- jQueryのAjaxで.phpファイルから出力された値を受け取る
- jQueryのload()で.phpファイルを読み込む
iFrameで表示
.htmlファイル内にiframeを設定して.phpファイルを指定。
手軽です。表示箇所が決め打ちになりますが、これで良さそうならこれで。
説明はWeb上でたくさん解説されていそうなので割愛します。
jQueryのAjaxで値を受け取る
phpから出力されたパラメータをAjaxで受け取ってJavaScriptで表示。
ちょっと調べてみたのですが、設定が微妙に大がかりになるので今回は次ので失礼します。
jQueryのload()で読み込む
iFrameの次に手軽に出来そうなのでこれで行こうと思います。
１、.phpファイルからは必要な部分だけ出力されるようにしておく
例 [ datetime.php ]
<p><?php
date_default_timezone_set('Asia/Tokyo');
echo '今日の日付と現在時刻は ';
echo date("Y-m-d H:i:s");
?></p>
２、.htmlの入れ込みたい所にID又はClassを付けた<div>を配置。
例 [ view_date.html ]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQueryのload()でphpファイルを読み込むサンプル</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="load_datetime_php.js"></script>
</head>
<body>
<h1>現在時刻を表示</h1>
<div id="draw_date">
<!-- ここに時間が入ります -->
</div>
</body>
</html>
３、jQueryのload()で.phpを読み込んで上記IDの<div>に流し込む。
例 [ load_datetime_php.js ]
$(function(){
// id="draw_date" 内にロード
$('#draw_date').load('datetime.php');
});
特記事項
load()も処理的にはAjaxっぽいです。
サーバーから取ってくる処理なのでローカル環境では動かないようです。
ちなみにどんな感じで読み込まれてるかはGoogle Chromeの「検証」機能で見ると分かりやすかったりします。
参考サイト
余談
もともとphpのカウンタをhtml内で表示出来ないかと思って調べてたのですが、
解説されてるのは大抵「.htaccess」で設定する方法だったので、別のアプローチをと思い記事にしてみました。
jQueryのAjaxも、また何か機会があったら調べて使ってみたいところです。
（JavaScript直でAjaxするより楽そうですし）
本家 Azure Contrail はこちら
コメントは承認待ちです。