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

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

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

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

Q&A

解決済

1回答

1555閲覧

なぜ即実行関数とhtmlタグ指定の組み合わせの時だけ動くのか

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

3グッド

1クリップ

投稿2018/03/08 03:51

伺いたいこと

先ほどjs読み込みの際はnullになるが、devツールのコンソールではnullにならないという質問を投稿したところ、素早く解答をいただき解決しました。

その際、以下の4つを試しました

  1. 即実行関数 + querySelectorALL("iframe");
  2. 即実行関数 + querySelector("iframeのid");
  3. window.onload + querySelectorALL("iframe");
  4. window.onload + querySelector("iframeのid");

上記のうち1番の即実行関数とhtmlタグ指定の組み合わせの時だけ動きました。
これはなぜなのかご教示いただけませんでしょうか。

ソース

動く

    1. 即実行関数 iframeタグ指定

lang:js

1"use strict"; 2(function () { 3 let iframes = document.querySelectorAll("iframe"); 4 iframes[0].onload = function(){ 5 let dropzoneFrame = document.querySelector('#clientframe'); 6 let dFWindow = dropzoneFrame.contentWindow; 7 let allElements = dFWindow.document.body.querySelectorAll('*'); 8 console.log(dFWindow); 9 } 10})();

動かない

    1. 即実行関数 iframe id指定

lang:js

1"use strict"; 2(function () { 3 let dropzoneFrame = document.querySelector('#clientframe'); 4 5 dropzoneFrame.onload = function(){ 6 let dFWindow = dropzoneFrame.contentWindow; 7 let allElements = dFWindow.document.body.querySelectorAll('*'); 8 console.log(dFWindow); 9 } 10})(); 11
    1. window.onload iframeタグ指定

lang:js

1"use strict"; 2window.onload = function () { 3 let iframes = document.querySelectorAll("iframe"); 4 iframes[0].onload = function () { 5 let dropzoneFrame = document.querySelector('#clientframe'); 6 let dFWindow = dropzoneFrame.contentWindow; 7 let allElements = dFWindow.document.body.querySelectorAll('*'); 8 console.log(dFWindow); 9 } 10} 11
    1. window.onload iframe id指定

lang:js

1"use strict"; 2window.onload = function () { 3 let dropzoneFrame = document.querySelector('#clientframe'); 4 5 dropzoneFrame.onload = function(){ 6 let dFWindow = dropzoneFrame.contentWindow; 7 let allElements = dFWindow.document.body.querySelectorAll('*'); 8 console.log(dFWindow); 9 } 10} 11

HTML

lang:html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>dnd</title> 6 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 7 crossorigin="anonymous"> 8 </head> 9 <body> 10 <div class="container"> 11 <div class="row"> 12 <div class="col-md-3"></div> 13 <div class="col-md-6"> 14 <iframe id="clientframe" disablehistory="true" src="./sandbox.html" style="visibility: visible; width: 700px; height: 700px; transform-origin: 0px 0px 0px; transform: scale(0.535172);"></iframe> 15 </div> 16 </div> 17 </div> 18 <script src="./application.js"></script> 19 </body> 20</html>
miyabi-sun, m.ts10806, kszk311👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

2は、私が確認した限りでは動きました。
(Google Chrome、Internet Explorer 11、FireFox)

3、4に関しては、
window.onloadにて、iframeのロードも完了してしまっており、
単純にiframe要素.onloadが実行されてないだけだと思います。

投稿2018/03/08 10:33

編集2018/03/08 10:48
miyabi_takatsuk

総合スコア9528

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

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

退会済みユーザー

退会済みユーザー

2018/03/08 11:45

なるほど!解答ありがとうございます! この質問をした環境では2が動かなかったのですが, 今,手元のPCで2が動きました. キャッシュクリアを忘れていたのかもしれません.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問