onloadの逆：一定時間読み込まれない時に動作させたい

iframe が読み込まれない時に通知を行いたいです。
setTimeout を使い3秒後に読み込まれているかをチェックして、読み込まれていない場合通知を行いたいです。
読み込みが完了した時は .onload が使えると思うのですが、うまくできませんでした。

js
1setTimeout("Alert()", 3000);
2
3function Alert() {
4  if (!LiteSiteIframe.onload) {
5    alert("iframeが読み込まれませんでした");
6  }
7}
8
9LiteSiteIframe で iframe を指定している状態です。

addEventListener('beforeunload' というものもあるようなのですが、少し動作が違うようでしたので質問しています。

お詫び

think49さん　mts10806さん　miyabi-sunさん

ご指摘していただきありがとうございます。

beforeunloadはmiyabi-sunさんのおっしゃる通り、調べている最中、ページの離脱を防止すする際に使われるということで、なんとなく使えるのではないのかと思い、特に調べることなく載せてしまいました。.onloadについても理解ができていなかったと思います。
全体を通し、具体的に自分なりの結論を思って質問するべきところを、丸投げのような形になってしまい申し訳ありませんでした。
そんな中、わかっていない部分などのご指摘や、具体的なコードまで教えていただきありがとうございます。

教えていただきなんとか動作するようになりましたが、自分で理解しきれていないため、再度調べてみます。
毎度、割と質問が投げやりすぎるとご指摘を受けるので気をつけて行きたいと思います。
今後ともよろしくお願いいたします。

m.ts10806

2018/07/23 22:03

「うまく動作しない」「うまくいかない」では何が起きているか伝わりません。「○○のようになるはずなのに××となってしまう」のような形で「ゴール」と「現象（エラーメッセージなども含む）」を明確にしてください。https://teratail.com/help/question-tips#questionTips3-4-1

2001Y

2018/07/23 23:46

申し訳ないです。ありがとうございます。

think49

2018/07/24 00:07

beforeunloadがどういうイベントだと思ったのですか。読み込み未完了の状態から完了になるまでの間、未完了ステータスのままですが、未完了を通知し続けるイベント？論理的に考えて、そのようなイベントが有り得ないことが分かるはずで、考え方の起点がおかしい気がします。

m.ts10806

2018/07/24 00:11

質問は編集できるので適宜対応してください。

miyabi-sun

2018/07/24 03:14

「beforeunload」は勉強がてら検索した結果、用途に近そうな名前の機能を見つけたがダメなのはわかってるけど一応書いておこうという感じでしょうね。今回は単なるノイズになってしまいましたが目くじら立てる程の事ではないと思います。

think49

2018/07/24 10:09

私が懸念したのは「用途に近そうな名前の機能を見つけた」の発想のまま終わらせているのがダメなんじゃないか、ということです。miyabi-sunさんが指摘された if (!LiteSiteIframe.onload) も名前だけ見てるから起こる間違いだと思います。beforeonloadを見つけたら、それがどういう機能なのか調べてみるのが常道と思いますが、調べた上のコードとは思えません。

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

回答3件

ベストアンサー

LiteSiteIframe.onload

なんでコレで行けるのかと判断したのか小一時間……
これはLiteSiteIframe.onload = function () {}でロードされたらやってほしい事を書く箇所です。
参考記事: JavaScript インラインフレーム(iframe)関連 - とみぞーノート

iframe が読み込まれない時に通知を行いたいです。

これを実現させる為には、setTimeoutの戻り値を使えば実現できるでしょう。
参考記事: WindowOrWorkerGlobalScope.setTimeout()
setTimeoutを実行すると、キャンセルする時に使えるIDが払い出されて、clearTimeoutを実行すれば「やっぱり取り消し」が出来ます。

JavaScript
1// とりあえず3秒経過したらアラートを出すように指示
2var timeoutId = setTimeout(function(){
3  alert("iframeが読み込まれませんでした");
4}, 3000);
5
6// iframeが読み込まれたら指示を取り消す
7LiteSiteIframe.onload = function () {
8  clearTimeout(timeoutId);
9}

このLiteSiteIframeがDOM要素ならば恐らくコレで実現出来るかと思います。

投稿2018/07/24 00:04

編集2018/07/24 01:15

miyabi-sun

総合スコア21194

分割統治法

毎度、割と質問が投げやりすぎるとご指摘を受けるので気をつけて行きたいと思います。

それはおそらく、質問の単位が大きすぎるのが要因だと思います。

仮に、私が 2001Y さんと同じ目標「一定時間読み込まれない時に動作させたい」を持って問題解決を図っているとします。
私は初めから完成形のコードを作り始めるのではなく、実装の為に必要なアルゴリズムを想定して、それを小さな単位に分解し、各々のコードの組み立て方を考えます。
今回のケースでいえば、beforeunload, onload という問題解決に役立ちそうな機能があるとして、それぞれの要素だけで自分が理解できる単位のミニマムコード(小さなコード)を作ります。
理解できなければ、理解できるまで小さなコードを組み立てなおし、問題点をシンプルにする事で理解しやすい状況を作り出します。

この手法は私が試行錯誤の末に辿り着いた結果ですが、一般には分割統治法と呼ぶそうです。

どんな大きな問題も小さな問題に分解すれば、シンプルに考える事が出来ます。
そして、より小さな単位で学習すればする程、より深く理解する事が出来ます。

やりすぎると、「それを無駄な行為だ(そこまで深く覚える必要はない)」と指摘される事はあります。
が、小さな単位の知識は応用が利きやすく、該当機能自体があまり使われなくても、該当機能を構成するアルゴリズムを覚えると、アルゴリズムの組み立て方に良い影響を与える事が多く、無駄ではないと考えています。

最も、初めから小さな単位に分解しすぎると、理解までの道のりが長くなり、学習時間が膨大になるか、学習する事を断念する事になります。
途中で学習を断念しない程度の小さな単位に分解する必要があります。

Re: 2001Y さん

投稿2018/07/24 15:40

編集2018/07/24 15:46

think49

総合スコア18189