phpファイルからjsファイルにデータを渡したい

もともと一つのファイルでphpもJavaScriptも書いていました。
その状態ではうまく動いたのですが、JavaScriptを別の.jsファイルに移したいです。
ですがうまくPHPのデータを.jsファイルに渡せません。

php
1<?php
2    $data = file($filename);
3?>
4
5<html>
6    <input type="hidden" id="data" style="display:none;" value="<?php echo json_encode($data); ?>">
7</html>
8<script type="text/javascript" src="js/main.js"></script>

javascript
1var data = document.getElementById('data').value;
2console.log(data);

JavaScriptとPHPでは実行順序的にJavaScriptを実行してからPHPが実行されると思うのですがそれが原因でしょうか？

いろいろ思いつくことは試したのですが、みんなうまくいかなかったです。
ご教授願いいたします。

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

回答3件

実行順序的にJavaScriptを実行してからPHPが実行される

いえ。実行されるのはサーバーサイドの言語であるPHPが先です。
あくまでPHPによって出力されたHTMLが先か、何も待たずに実行されるJavaScriptが先か　の問題です。

単にドキュメントの読み込みが終わってないタイミングでJavaScriptが実行されてしまうからでは。
yambejpさんのようにLoad後のイベントで取得するとか、いっそhiddenを使わず直接書いても良いのではと。

html
1<script>
2var json_data = "<?php echo json_encode($data); ?>";
3</script>
4<script type="text/javascript" src="js/main.js"></script>

main.js

console.log(json_data);

※いずれにしてもJavaScriptの実行はLoad後にするようにしたほうが良いです。

投稿2018/06/08 03:54

m.ts10806

総合スコア80850

n-hiroki

2018/06/08 04:02

mts10806さん回答ありがとうございます！実行順序を勘違いしていました。ご指摘ありがとうございます！それと、JavaScriptの実行はLoad後にするように気をつけます！

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

ベストアンサー

特に問題があるようには見えませんが、たとえば

PHP
1<?php
2    $data = file($filename);
3?>
4<html>
5<head>
6<script type="text/javascript" src="js/main.js"></script>
7</head>
8<body>
9<input type="hidden" id="data" style="display:none;" value="<?php echo json_encode($data); ?>">
10</body>
11</html>

としておいて、jsを

main.js

javascript
1window.addEventListener('DOMContentLoaded', function(e){
2  var data = document.getElementById('data').value;
3  console.log(data);
4});

のようにしてみてはどうでしょうか？

投稿2018/06/08 03:36

yambejp

総合スコア114839

n-hiroki

2018/06/08 03:59

yambejpさん回答ありがとうございます！早速試してみます！

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

JavaScriptの実行をLoad後にしてもうまくいかなかったのですが、解決したので記入いたします。
yambejpさんが教えてくれたように変更したところ、なぜか一文字しか取得できませんでした。
もともと何も出力されていなかったので大きな進歩です！！（実際は１０００文字以上あります。）
それでいろいろ調べたところ、どうもPHPのデータ型がおかしい。
string型かと思っていたのですがarray型で$data[0]に全ての値が入っていました。
なので、string型にキャストすることで対応しました。

ですが、これでもまだうまくいきませんでした。
inputタグのvalueにjson_encode(変数)をechoするのがいけなかったようです。
なので以下のように修正したら正常に動きました。

php
1<?php
2    $data = file($failname);
3    if($data == false){
4        //エラーチェック
5    }
6    //型がおかしいのでキャストします。
7    $data = (string)$data[0];
8?>
9<!DOCTYPE html>
10<html lang="jp">
11<head>
12    <meta charset="UTF-8">
13    <script type="text/javascript" src="js/main.js"></script>
14</head>
15<body>
16    <input type="hidden" id="data" style="display:none;" value="<?php echo htmlspecialchars($data, ENT_QUOTES, 'UTF-8'); ?>">
17</body>
18</html>

javascript
1window.addEventListener('DOMContentLoaded', function(e){
2    var data = document.getElementById('data').value;
3    console.log(data);
4});