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

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

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

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

Q&A

解決済

3回答

2776閲覧

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

2001Y

総合スコア83

JavaScript

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

0グッド

1クリップ

投稿2018/07/23 17:23

編集2018/07/24 11:43

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についても理解ができていなかったと思います。
全体を通し、具体的に自分なりの結論を思って質問するべきところを、丸投げのような形になってしまい申し訳ありませんでした。
そんな中、わかっていない部分などのご指摘や、具体的なコードまで教えていただきありがとうございます。

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

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

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

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

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

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

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を見つけたら、それがどういう機能なのか調べてみるのが常道と思いますが、調べた上のコードとは思えません。
guest

回答3

0

ベストアンサー

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

総合スコア21158

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

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

0

分割統治法

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

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

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

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

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

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

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

Re: 2001Y さん

投稿2018/07/24 15:40

編集2018/07/24 15:46
think49

総合スコア18156

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

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

2001Y

2018/07/24 15:48

学び方についても教えていただきありがとうございます。 確かに、目的を直接質問しすぎているということがありそうです。 今後ともよろしくお願いいたします。
guest

0

document.readyState

document.readyState で文書読み込み状態を確認して下さい。
https://developer.mozilla.org/ja/docs/Web/API/Document/readyState

contentDocument

contentDocument プロパティでiframe要素のdocumentを参照可能です。
https://uhyohyo.net/javascript/7_1.html
https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument

Re: 2001Y さん

投稿2018/07/24 00:02

編集2018/07/24 00:15
think49

総合スコア18156

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問