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

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

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

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

jQuery

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

Q&A

1回答

1083閲覧

jQueryで親ウィンドウからiframe内のhead要素にcssやjsを追加後にiframe内のhead要素のjQueryを実行させたいです

programmer010

総合スコア14

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

jQuery

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

0グッド

0クリップ

投稿2018/03/07 17:23

編集2022/01/12 10:55

下記のサイトを参考にして、
jQueryで親ウィンドウからiframe内のhead要素にcssやjsを追加することはできたのですが、
追加する前にiframe内のhead要素のjQueryが実行されてしまい、エラーとなってしまいます。
http://www.koikikukan.com/archives/2015/03/03-005555.php

もし解決策をおわかりの方がおられましたら、ご教授いただけると幸いです。

何卒、よろしくお願い申し上げます。

ソースコード

■jQuery(親ウィンドウ)

<script> $(function() { $('#frame').on('load', function() { var contents_head = $(this).contents().find('head'); contents_head.append('<link rel="stylesheet" href="./resources/assets/css/jquery-ui.min.css">'); contents_head.append('<script type="text/javascript" src="./resources/assets/js/jquery.js"></' + 'script>'); contents_head.append('<script type="text/javascript" src="./resources/assets/js/jquery-ui.min.js"></' + 'script>'); </script>

■jQuery(iframe内)

<head> <script> $(document).ready(function(){ func_test(); }); </script> </head>

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

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

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

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

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

guest

回答1

0

必要なものが揃うのを待ってから始めるようにするのはいかがでしょうか。

javascript

1function start() { 2 if (window.$ && window.$.ui) { 3 $(document).ready(function(){ 4 func_test(); 5 }); 6 } else { 7 setTimeout(start, 50); 8 } 9} 10start();

追記:また、親ウインドウのスクリプトを以下のように修正してください。

javascript

1$(function() { 2 $('#frame').on('load', function() { 3 var iframe = this; 4 // iframe の window 5 var iframeWindow = iframe.contentWindow; 6 // iframe の document 7 var iframeDocument = iframeWindow.document; 8 // iframe の document.head 9 var iframeHead = iframeDocument.head; 10 11 // iframeDocument を使って 12 // <link rel="stylesheet" href="./resources/assets/css/jquery-ui.min.css"> 13 // をつくって iframeHead に追加する 14 var link = iframeDocument.createElement('link'); 15 link.setAttribute('rel', 'stylesheet'); 16 link.setAttribute('href', './resources/assets/css/jquery-ui.min.css'); 17 iframeHead.appendChild(link); 18 19 // iframeDocument を使って 20 // <script src="./resources/assets/js/jquery.js"> 21 // をつくって iframeHead に追加する 22 var script1 = iframeDocument.createElement('script'); 23 script1.setAttribute('src', './resources/assets/js/jquery.js'); 24 iframeHead.appendChild(script1); 25 26 // iframeDocument を使って 27 // <script src="./resources/assets/js/jquery-ui.min.js"> 28 // をつくって iframeHead に追加する 29 var script2 = iframeDocument.createElement('script'); 30 script2.setAttribute('src', './resources/assets/js/jquery-ui.min.js'); 31 iframeHead.appendChild(script2); 32 33 }) 34});

iframe 内の link や script の要素を生成するのに、親ウインドウにある jQuery($)や document をつかわないのがポイントです。親の document で生成された要素を iframe の中に持っていっても、データを読み込んでくれません。iframe 内の要素は iframe の document、つまり iframe.contentWindow.document で生成します。

動くサンプルを作りました。下の方にある loadJquery が親ウインドウのスクリプトにあたります。
https://codepen.io/hoo-chan/pen/PRowQj
IE以外のブラウザでご覧ください。

投稿2018/03/07 23:17

編集2018/03/08 16:51
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

programmer010

2018/03/08 05:08

ご回答ありがとうございます。 教えていただいた方法を試してみましたが、 下記のようにConsole logで確認したところ 延々とTimeoutが発生し続けてしまいます。 もし原因がおわかりでしたら、ご教授いただけると幸いです。 何卒、よろしくお願い申し上げます ■jQuery(親ウィンドウ) ``` <script> $(function() { $('#frame').on('load', function() { console.log("frame load"); var contents_head = $(this).contents().find('head'); contents_head.append('<link rel="stylesheet" href="./resources/assets/css/jquery-ui.min.css">'); contents_head.append('<script type="text/javascript" src="./resources/assets/js/jquery.js"></' + 'script>'); contents_head.append('<script type="text/javascript" src="./resources/assets/js/jquery-ui.min.js"></' + 'script>'); </script> ``` ■jQuery(iframe内) ``` <head> <script> function start() { if (window.$ && window.$.ui) { $(document).ready(function() { console.log("ready"); func_test(); }); } else { console.log("Timeout"); setTimeout(start, 50); } } start(); </script> </head> ``` ■Console log ``` Timeout frame load Timeout Timeout Timeout Timeout : : </script> ```
退会済みユーザー

退会済みユーザー

2018/03/09 03:17

iframe 内の link や script の要素を生成するのに、親ウインドウの jQuery($)や document を使ってしまっていたのが原因です。解決方法を追記しましたので、確認してみてください。
programmer010

2018/03/09 06:35

詳細なご回答ありがとうございます。 また、サンプルまで作成していただきありがとうございます。 早速、教えていただいた方法を試してみましたところ、 Console logは下記のようになり、延々とTimeoutが発生する現象は解消されました。 ■Console log Timeout frame load ready 本当に助かりました。 ちなみに、教えていただいたような方法でhead要素に「titleタグ」を追加することは可能でしょうか。 度々のご質問で申し訳ございませんが、ご教授いただけると幸いです。 何卒、よろしくお願い申し上げます。
退会済みユーザー

退会済みユーザー

2018/03/09 07:00 編集

用途がわかりませんが、<title>も同じような方法で追加できます。 var titleElement = iframeDocument.createElement('title'); titleElement.textContent = 'タイトル'; iframeDocument.head.appendChild(titleElement); ドキュメントのタイトルを設定するだけなら iframeDocument.title = 'タイトル'; でもできます。 ただ、iframe 内に jQuery が準備できたのなら、あとはiframe内のスクリプトの仕事になってくるのではないでしょうか。 そもそも、iframe の HTML にページの <script> は入れられて jQuery をロードする <script> が入れられず、今回のように外から入れざるをえないのは特殊なケースだと思います。シンプルに iframe の HTML の方に jQuery をロードする <script> が入れられないのか、programmer010 さんが扱っている iframe の周辺事情を見直してみると、もっと簡単なつくりにできるかもしれませんね。
programmer010

2018/03/11 04:22

いつもご回答ありがとうございます。 今までjQueryを全くと言っていいほど、使用したことがありませんでしたので、 ご回答いただけて、非常に助かっています。 iframeのHTMLの方にjQueryをロードする<script>が入れられないわけではないのですが、 iframeがタブ切り替えで表示する画面で、10画面程あり、また読み込むcssやjsも質問している以上にありまして、 ただheadが全て共通でしたのでcssやjsの追加が発生した際に全ての画面を修正しなければならなくなりますので、できれば共通化したかったのが今回の意図でした。 ちなみにおわかりでしたら教えていただきたいのですが、cssが適用される前の画面がチラつくのですが、それを解消するのは難しいでしょうか? 度々のご質問で申し訳ございませんが、ご教授いただけると幸いです。 何卒、よろしくお願い申し上げます。
退会済みユーザー

退会済みユーザー

2018/03/11 05:46

CSSの読み込みが終わるまでは、CSSが効いていない状態の画面が見えてしまいます。この問題を解決するには、共通の HTML に、jquery-ui.css を読み込む <link ...> を書きましょう。これで、 CSS が読み込まれてからページが表示されるようになります。私は、ついでに jquery.js、jquery-ui.js も追加した方がよいと思います。jQuery 自体はページに対して何も影響を及ぼしませんから、すべてのページで読み込まれても問題は起こりません。むしろ、すぐに jQuery を使い始められるメリットの方が大きいでしょう。
programmer010

2018/03/12 03:55

いつもご回答ありがとうございます。 > 共通の HTML に、jquery-ui.css を読み込む <link ...> を書きましょう。 質問に詳細まで記載しておりませんでしたが、 構成としては、JavaのWebアプリでして、親ウィンドウが(main.jsp)で、 親ウィンドウの<head>は全画面共通のJSP(header.jsp)内に記載しており、 そのJSPを親ウィンドウからincludeしている形です。 その場合、「jquery-ui.css を読み込む <link ...>」はheader.jspに記載する必要がありますでしょうか。 もしくは、親ウィンドウの<body>内に記載してもよいものなのでしょうか。 初歩的なご質問で申し訳ございませんが、ご教授いただけると幸いです。 何卒、よろしくお願い申し上げます。
退会済みユーザー

退会済みユーザー

2018/03/13 14:40

たとえば、body の中に書いておいて、body の中身を空っぽにするようなコードを書いてしまうと、CSS が効かなくなってしまいますので、私だったら、link は head の中に書きます。おっしゃっている状況からすると、header.jsp の中に書くのがよろしいかと思います。
programmer010

2018/03/16 04:19

いつもご回答ありがとうございます。 教えていただいた通り、header.jsp の中に「jquery-ui.css を読み込む <link ...>」を記載してみましたが、 やはりCSSが効いていない状態の画面が一旦表示されて、その後にCSSが効いている状態の画面に切り替わります。 そもそも、プログラムの構成的に対処方法はないのでしょうか。 もし何かご存知でしたら、ご教授いただけると幸いです。 何卒、よろしくお願い申し上げます。
退会済みユーザー

退会済みユーザー

2018/03/17 11:28 編集

スタイルが効いていない状態が見えてしまうのは、スクリプトが CSS よりも先に実行されてしまっているのが原因ですので、jquery-ui.cssの読み込みをなるべく上の方に書くか、あるいは start(); の部分を setTimeout(start); としてみると、改善されるかもしれません。
programmer010

2018/03/19 02:17

いつもご回答ありがとうございます。 「jquery-ui.cssの読み込みをなるべく上の方に書くか」は、既にそのような書き方になっておりましたので、 start(); の部分を setTimeout(start); としてみましたが、現象は変わりませんでした。 「スクリプトが CSS よりも先に実行されてしまっているのが原因ですので」というのは、 おっしゃる通りだと納得できました。 ご教授ありがとうございました。 ちなみに、Chromeの「Developer Tools」のElementsタブで確認したところ、 元々 iframe内の<head>部に記載しておりました <script>function start() ~</script> の部分が、 <body>部の先頭に表示されているのですが、これが何か関係ありますでしょうか。 もし何かおわかりでしたら、ご教授いただけると幸いです。 何卒、よろしくお願い申し上げます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問