PHPファイルの変数を外部のJSファイルで受け取りたい

以下のコードを実行すると外部のJSで

ReferenceError: Can't find variable: php

と言われてしまいます。どこが間違っていますか。

このPHP内にscriptを実行すると上手く行きますが長くなるので外部のJSのjQueryを実行したいです。
他にもinputにhiddenを設定し送る方法もあるようですが、外部ファイルのやり方が今実現したい機能でにおいては都合がいいので。。。。

ご教授お願いします

PHP
1<?php
2
3$word = "おはよう";
4
5?>
6<!DOCTYPE html>
7<html lang="en" dir="ltr">
8
9<head>
10  <meta charset="utf-8">
11  <title>SeeHotels</title>
12  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
13</head>
14
15<body>
16  <header>
17  </header>
18
19  <main>
20    <p>今日はいい天気ですね</p>
21  </main>
22
23  <footer>
24  </footer>
25  <script src="js/showhotels.js">
26  var php = {word: "<?php echo $word; ?>"};
27  </script>
28
29</body>
30</html>
31

参考:サイト
https://rimane-novels.net/php-for-js-945/

「追記」

回答ありがとうございます。現在のコードです
エラー
[Error] SyntaxError: Unexpected identifier 'word'. Expected '}' to end an object literal.
（anonymous関数） (sampke.php:23)
[Error] ReferenceError: Can't find variable: php
（anonymous関数） (showhotels.js:3)
j (jquery.min.js:2:26931)
fireWith (jquery.min.js:2:27740)
ready (jquery.min.js:2:29544)
I (jquery.min.js:2:29729)

PHP
1<?php
2
3$word = json_encode(['word' => 'おはよう'],JSON_HEX_QUOT | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS);
4
5?>
6<!DOCTYPE html>
7<html lang="en" dir="ltr">
8
9<head>
10  <meta charset="utf-8">
11  <title>SeeHotels</title>
12  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
13</head>
14
15<body>
16  <header>
17  </header>
18
19  <main>
20    <p>今日はいい天気ですね</p>
21  </main>
22
23  <footer>
24  </footer>
25
26</body>
27<script>
28  var php = {word: "<?php echo $word; ?>"};
29</script>
30<script src="js/showhotels.js"></script>
31</html>
32

bochan2

2019/02/11 08:46

本筋と関係ないんですがjavascriptのデータ取得を埋め込みphpでやるとサーバーサイドとクライアントの処理の区別が付かなくなって沼にはまるので、ajaxで全部取得するかjsを止めるかした方がいいと思います

m.ts10806

2019/02/11 12:54

↑この方はその手の話まったく聞かないので無用かと。プログラムが思った通りに動くと思ってるので。丸投げしていることにも気づいてません。

行動規範の内容に同意します

回答1件

ベストアンサー

以下の箇所ですが、

JavaScript
1<script src="js/showhotels.js">
2var php = {word: "<?php echo $word; ?>"};
3</script>

これだと、js/showhotels.js の読み込みのみが行われ、var php = ... が実行されません。
意図は、以下ではないでしょうか?

JavaScript
1<script>
2  var php = {word: "<?php echo $word; ?>"};
3</script>
4<script src="js/showhotels.js"></script>

var php = ... を前に持ってきた理由は、おそらく変数 php をshowhotels.jsで参照しているのだろうと思ったからです。

また、変数 $word が外部から変更できる値の場合、これだとクロスサイトスクリプティングになります。

PHP
1$word = '"};alert(1)//';     // alert(1)が実行される

以下のようにするとよいと思います。

PHP
1$word = json_encode(['word' => 【javaScriptに渡したい文字列】],
2                    JSON_HEX_QUOT | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS);
3// 【中略】
4var php = <?php echo $word; ?>;