質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

856閲覧

HTML javascript プログラムの動作順番

4glte

総合スコア4

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

2クリップ

投稿2020/09/06 06:50

前提・実現したいこと

HTMLからjavascriptファイルを読み込む仕組みのサイトを構築しています。
どうやら、client.jsを読み込む前に、GAconnect.jsが動作してしまっているのが原因ではないかとこのサイトの方から意見をもらえましたが、それがどうして起きているのか、どう直せばいいか分からず、困っているため質問させて頂きました。

javascriptファイルにアクセスするコードは以下のように記述しました。

発生している問題・エラーメッセージ

GAconnect.js:20 Uncaught TypeError: Cannot read property 'authorize' of undefined at authorize (GAconnect.js:20) at GAconnect.js:133

html内コード

html

1<head> 2 <!-- Global site tag (gtag.js) - Google Analytics --> 3<script async src="https://www.googletagmanager.com/gtag/js?id=xxxxxxxxxx"></script> 4<script> 5 window.dataLayer = window.dataLayer || []; 6 function gtag(){dataLayer.push(arguments);} 7 gtag('js', new Date()); 8 9 gtag('config', 'xxxxxxxxxx'); 10</script> 11</head> 12 13<body> 14 15<iframe width="800" height="480" src="https://my.matterport.com/show/?m=xxxxxxxxxxxxx&play=1&amp;lang=jp&amp;ga=xxxxxxxxxx" 16 frameborder="0" allowfullscreen allow="vr" 17 id="showcase_iframe" 18 style=" 19 position:relative; 20 top:0px; 21 left:0px; 22 overflow:hidden; 23 z-index:10; 24 "> 25 </iframe> 26 27<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> 28<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script> 29<script src="https://apis.google.com/js/client.js?onload=authorize"></script> 30<script type="text/javascript" src="GAconnect.js"></script> 31<script type="text/javascript" src="app1.js"></script> 32 33</body> 34

###javascript GAcoonect.js内コード

function authorize(event) { // Handles the authorization flow. // `immediate` should be false when invoked from the button click. var useImmdiate = event ? false : true; var authData = { client_id: CLIENT_ID, scope: SCOPES, immediate: useImmdiate }; gapi.auth.authorize(authData, function(response) { var authButton = document.getElementById('auth-button'); if (response.error) { authButton.hidden = false; } else { authButton.hidden = true; queryAccounts(); } }); } authorize('click');

試したこと


authorize('click');を
window.onload = authorize('click');に変更しましたがダメでした。

同様のエラーが出力されました。


authorize('click');を削除して
app1.jsで作動させるのに使用しているDOMcontentloadedに入れ替えました。

document.addEventListener('DOMContentLoaded', () => {
iframe = document.getElementById('showcase_iframe');
iframe.addEventListener('load', authorize, true);
});

エラーはなくなりましたが、
authorize関数が起動しなかったです。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

headタグの冒頭にGoogleタグマネが設置されているので、ページのbody下部でのscript動作をさせるよりも、タグマネ内部で処理をした方がいいような気がします。

また、client.jsをhead内の最上部に記述したら、モジュールの事前読み込みは完了していると思いますよ。

投稿2020/09/14 00:06

geta

総合スコア241

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問