javascriptの関数が実行されない　LINE Liffでプロフィールの取得

LINE Liffの開発をやっております。
初心者ながら調べながらやっておりますが、うまく情報を取得できるものとできないものがあり、
JavaScriptの書き方が悪いのか、LINE Liffの構文の書き方が悪いのかわかりません。
助けていただけると嬉しいです。

#やりたいこと
index.php

LINEアプリからLiff用URLをクリックすると、このページが開きます。
ページを開いたら、表の部分のuserId,displayName,statusMessage,lanuage,isInCliend,isLoggedInにデータが記載されるようにしたいです。

しかし、今は何も表示されません・・・苦肉の策に、getProfileというボタンを設置し、ボタンをクリックすると表示されるようにしていました。しかし、getProfileをクリックしても表示されません。

##コード①

index.php

<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
    <head>
    
        <meta charset="UTF-8">
        <meta name="robots" content="noindex,nofollow">
        <!-- viewportの設定 -->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="../style/mysheet.css">
      
        <title>〇〇〇</title>
    </head>
    <body>
        <div id="wrapper">
            <header>
                <nav class="navbar navbar-expand-sm bg-navbar navbar-brand justify-content-center">
                    <div id="header">
                        <div id="logo" class="navbar-logo">
                            <img src="../style/image/yadorigi_logo.PNG"  class="logo-img"></a>
                        </div>
                    </div>
                </nav>
            </header>
            <div class="container">
                <div class="h1title  mt-4">
                    <h1>〇〇〇</h1>
                </div>
                <p id="browserIdToken"></p>
                <div>
                    「ご利用開始」ボタンをクリックすると、その時点から24時間、こちらのKEY OPEN SYSTEMをご利用いただけます。
                </div>
                
                <div>
                    <form method="post" action="open.php">
                        <div class="form-group row mt-4">
                            <label class="col-4 col-form-label text-right">オフィス：</label>
                                <div class="col-8">
                                    <select name="office" class="form-control">
                                        <option value="大阪本町" selected>大阪本町office</option>
                                    </select>
                                </div>
                            <div class="col text-center mt-4">
                                <input type="submit" class="btn btn-info" value="ご利用開始">
                            </div>
                        </div>
                    </form>
                </div>
                
                <div>
                    <button onclick="getProfile();displayLiffData();" class="btn btn-danger">getProfile</button>
                </div>
                
                <div id="profilepicturediv">
        </div>
        <table border="1">
            <tr>
                <th>userId</th>
                <td id="useridprofilefield"></td>
            </tr>
            <tr>
                <th>displayName</th>
                <td id="displaynamefield"></td>
            </tr>
            <tr>
                <th>statusMessage</th>
                <td id="statusmessagefield"></td>
            </tr>
        </table>
    </div>

    <div id="liffdata">
        <h2>LIFF Data</h2>
        <table border="1">
            <tr>
                <th>language</th>
                <td id="browserLanguage"></td>
            </tr>
            <tr>
                <th>isInClient</th>
                <td id="isInClient"></td>
            </tr>
            <tr>
                <th>isLoggedIn</th>
                <td id="isLoggedIn"></td>
            </tr>
	    <tr>
                <th></th>
                <td>終了</td>
            </tr>
            
        </table>
    </div>
        
                <footer class="text-center pt-1 pb-1 small fixed-bottom">
  	                c All rights reserved by YADIRIGI.
                </footer>
                
                
                <!-- liff用scriptを読み込む -->
                <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
		        <script src="../style/liff.js"></script>
		        <script>
	            
		        </script>
		        
                <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
                <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
                <script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
            </div>
        </div>
    </body>
</html>

liff.js

//初期化
window.addEventListener('load', function() {
                    //初期化 
                        liff.init({ liffId: "1654330436-BKj1ZRrQ" });
                        getProfile();
                        displayLiffData();
});

// プロファイルの取得と表示
function getProfile(){
    // https://developers.line.me/ja/reference/liff/#liffgetprofile()
    liff.getProfile().then(function (profile) {
        document.getElementById('useridprofilefield').textContent = profile.userId;
        document.getElementById('displaynamefield').textContent = profile.displayName;

        var profilePictureDiv = document.getElementById('profilepicturediv');
        if (profilePictureDiv.firstElementChild) {
            profilePictureDiv.removeChild(profilePictureDiv.firstElementChild);
        }
        var img = document.createElement('img');
        img.src = profile.pictureUrl;
        img.alt = "Profile Picture";
        img.width = 200;
        profilePictureDiv.appendChild(img);

        document.getElementById('statusmessagefield').textContent = profile.statusMessage;
    }).catch(function (error) {
        window.alert("Error getting profile: " + error);
    });
}

function displayLiffData() {
    document.getElementById('browserLanguage').textContent = liff.getLanguage();
    document.getElementById('isInClient').textContent = liff.isInClient();
    document.getElementById('isLoggedIn').textContent = liff.isLoggedIn();

}

【結果】
ページを開いたときに表示されない
getProfileをクリックしても表示されない

##コード②
indexの </body>前にscriptタグを追加して、liff.jsの初期化の関数を記載。
liff.jsから初期化の関数を削除。

index.php(一部)

</table>
    </div>        
                <footer class="text-center pt-1 pb-1 small fixed-bottom">
  	                c All rights reserved by YADIRIGI.
                </footer>            
                <!-- liff用scriptを読み込む -->
                <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
		        <script src="../style/liff.js"></script>
		        <script>
		            window.addEventListener('load', function() {
                    //初期化 
                        liff.init({ liffId: "1654330436-BKj1ZRrQ" });
                        getProfile();
                        displayLiffData();
                        
                    })
	        </script>		        
                <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

liff.js　初期化関数を削除した

// プロファイルの取得と表示
function getProfile(){
    // https://developers.line.me/ja/reference/liff/#liffgetprofile()
    liff.getProfile().then(function (profile) {
        document.getElementById('useridprofilefield').textContent = profile.userId;
        document.getElementById('displaynamefield').textContent = profile.displayName;

        var profilePictureDiv = document.getElementById('profilepicturediv');
        if (profilePictureDiv.firstElementChild) {
            profilePictureDiv.removeChild(profilePictureDiv.firstElementChild);
        }
        var img = document.createElement('img');
        img.src = profile.pictureUrl;
        img.alt = "Profile Picture";
        img.width = 200;
        profilePictureDiv.appendChild(img);

        document.getElementById('statusmessagefield').textContent = profile.statusMessage;
    }).catch(function (error) {
        window.alert("Error getting profile: " + error);
    });
}

function displayLiffData() {
    document.getElementById('browserLanguage').textContent = liff.getLanguage();
    document.getElementById('isInClient').textContent = liff.isInClient();
    document.getElementById('isLoggedIn').textContent = liff.isLoggedIn();

}

【結果】
ページを開いただけでは表示されない。
getProfileをクリックすると、表示されるが、isInClient,isLoggedInだけ表示されない（なぜ……）

getProfileボタンをクリックしなくてもデータを取得したいのですが、
アドバイスいただけますと幸いです。

##補足：LINE Liffの構文です
getProfile
https://developers.line.biz/ja/reference/liff/#get-profile

getLanguage
https://developers.line.biz/ja/reference/liff/#get-language

isInClient
https://developers.line.biz/ja/reference/liff/#is-in-client

isLoggedIn
https://developers.line.biz/ja/reference/liff/#is-logged-in

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

回答1件

自己解決

<script>
		            window.addEventListener('load', function() {
                    //初期化 
                 
                        liff.init({
                            liffId: "1654330436-BKj1ZRrQ"}).then(() => {
                                getProfile();
                                displayLiffData();
                            });
                       
                    })
		            
		        </script>

liff.initが終わる前に
getProfile();
displayLiffData();　が実行されてしまっていたようでして、
上記のようにscriptを変更しましたらページオープン時にも取得できました。

投稿2020/06/15 14:06

mikeko0901

総合スコア227