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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

MutationObserverdeでiframeの挿入を監視したい

teratails
teratails

総合スコア0

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0評価

0クリップ

1151閲覧

投稿2020/04/05 16:03

前提・実現したいこと

YouTubeの埋め込み完了後にアラートを出したいです。
(実装としてはアラートでなく「読み込み中です」の.loaderを削除したいです。)

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

MutationObserverが順番通りに動きません。

エラーメッセージはありません。

該当のソースコード

html

<div id="box">box</div> <a href="javascript:void(0);" class="change">実行</a>

css

body { text-align:center; } #box { background: #ccc; width: 200px; height: 100px; line-height: 100px; margin: 0 auto; } .loader { position: absolute; top :0; right: 0; left: 0; right: 0; z-index:0; } .iframe { position: relative; z-index: 1; }

js

// 実行 $('.change').click(function() { var url = "https://www.youtube.com/embed/6sUM254lAfg"; var iframe = '<iframe src="'+url+'"></iframe>'; $('#box').html('<div class="loader">読み込み中です</div>'); $('#box').append(iframe); }); // 対象ノード const target = document.getElementById('box'); // オブザーバーインスタンス準備 const observer = new MutationObserver((mutations) => { alert('完了'); // 実装としてはここで.loaderを削除したい }); // オブザーバーの監視対象の設定 const config = { childList: true }; //対象と設定を渡す observer.observe(target , config);

試したこと

同じ流れでデータ属性の変更は以下の通りできました。
ということはまさか、iframeはMutationObserverで監視できないのでしょうか。

js

// 実行 $('.change').click(function() { color = '#'+Math.floor(Math.random()*16777215).toString(16); $('#box').css('background', color); }); // 対象ノード const target = document.getElementById('box'); // オブザーバーインスタンス準備 const observer = new MutationObserver((mutations) => { alert('完了'); }); // オブザーバーの監視対象の設定 const config = { attributes: true }; //対象と設定を渡す observer.observe(target , config);

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

jQuery 3.4.1

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。