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

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

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

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

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

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1865閲覧

管理下にあるクロスドメインでiframeのDOMを操作したい場合

cp_cop

総合スコア40

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

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

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/03/11 03:40

編集2020/03/11 03:41

親ページと子ページが同じドメインの場合には以下のようにすることで親ページから子ページのHTMLを操作することができますが、親ページがサブドメインや他のドメインになった場合に操作することができません。
クロスドメインの制約だと思うのですが、サブドメインやその他のドメインが全て自分の管理化にある場合でも不可能でしょうか?
何か対策策がありましたらばお願いいたします。

親ページ https://exsample.com/foo.html

//以下は親ページに記述の内容です <iframe id="Frame" class="ifrm" src="https://exsample.com/bar.html" frameborder="0" scrolling="no"></iframe> <script> $(function() { $('#Frame').on('load', function() { $("#Frame").contents().find("div").css({color:'#ff0000'}); }) }); </script>

子ページ https://exsample.com/bar.html

親ページがサブドメイン(https://123.exsample.com/foo.html)やその他のドメイン(https://fuga.com)になった場合でも親ページから子ページのDOMを操作したいと考えています。
全ての親ページのドメインは管理下にあります。

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

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

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

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

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

cp_cop

2020/03/11 03:55

PostMessageを使ったクロスドメイン通信を調べ試みたのですがだめでした。
guest

回答1

0

ベストアンサー

クロスドメインの制御を調整するとか
サーバーサイドで一度受け取って同じドメイン内で処理するとかで対応できませんか?

投稿2020/03/11 03:55

yambejp

総合スコア114585

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

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

yambejp

2020/03/11 03:55

//hoge.html <script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelector('#btn').addEventListener('click',()=>{ var win=document.querySelector('#hoge').contentWindow; win.document.querySelector('#fuga').textContent="piyo"; }); }); </script> <iframe src="fuga.html" id="hoge"></iframe> <input type="button" value="change" id="btn"> //fuga.html <div id="fuga">fuga</div>
cp_cop

2020/03/11 04:01

回答ありがとうございます。 クロスドメインの制御を調整するために.htaccessに以下を記述してみましたが500エラーになってしまいました。 Header always append X-Frame-Options ALLOW-FROM [許可するサブドメインやその他ドメインのURL] 制御する方法とは、どのような方法がありますでしょうか。
cp_cop

2020/03/11 04:13

せっかくご回答いただいたのですが、知識に乏しい私には意味を理解することができませんでした。 やはりクロスドメインでは子ページのDOMを操作することは難易度が高そうですね。
yambejp

2020/03/11 04:25 編集

受け取った側で処理するという手は? //hoge.html <script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelector('#btn').addEventListener('click',()=>{ var win=document.querySelector('#hoge').contentWindow; win.postMessage("piyo", 'ttp://exsample.com'); }); }); </script> <iframe src="ttp://exsample.com/fuga.html" id="hoge"></iframe> <input type="button" value="change" id="btn"> //exsample.com/fuga.html <script> window.addEventListener('message',(e)=>{ var str=e.data; document.querySelector('#fuga').textContent=str; }); </script> <div id="fuga">fuga</div>
cp_cop

2020/03/11 04:36

ありがとうございます。試してみたところ親ページがサブドメインの場合でも子ページのテキストがpiyoに変わりました。 最終的にはボタンをクリックせずに子ページ内のDOMを操作したいので、教えていただいた内容から試行錯誤しながら試してみたいと思います。
yambejp

2020/03/11 04:37

> ボタンをクリックせずに子ページ内のDOMを操作したい なにをトリガーにどうしたいか仕様を決め込むことですね 子windowが読み切る前に送っても受け取り側が対応できませんので
cp_cop

2020/03/11 04:44

ありがとうございます。 とても勉強になりました。 アドバイス通りなにをトリガーにするかがポイントになると思いますので、改めてやりたいことの仕様を考え試行錯誤していこうと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問