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

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

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

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

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

6071閲覧

クロスドメインでのiframeの高さ調整方法

n024

総合スコア6

iframe

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

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/02/17 03:34

編集2018/03/02 08:34

A「https://form.kintoneapp.com/public/form/show/040e8136a701839762f3081df38f8d98e8efd8dd38898bea10175669afec5f0f#/」(フォームブリッジ)で生成したiframe※1をB「https://yyy.com」で使用する場合、
iframeの高さをスクロールバー非表示で自動調整する場合はどうすればよいのでしょうか?

※1 iframeのコード

<iframe frameborder="0" scrolling="auto" src="https://form.kintoneapp.com/public/form/show/040e8136a701839762f3081df38f8d98e8efd8dd38898bea10175669afec5f0f?iframe=true" title="新しいアプリ" width="100%" height="1024px"></iframe>

▼理想の形

iframeの内容量が変わると高さが自動調節されるイメージです。

下記が現状のコードです。
1ページ目(step1)はよいのですが、2ページ目(step2)に移動した時iframeがちょうどフッターとの境目で切れてしまい表示されません。スクロールバーを非表示にしたまま可能な回避方法ございましたらご教授をお願いいたします。

よろしくお願いいたします。

▼HTML

<div id="sample1"> <div class="sample2"> <iframe id="fugapage" scrolling="no" src="https://form.kintoneapp.com/public/form/show/0b3fc6161c1099ff74546c2efdc95af9049f0141143fc59aca4e4cfd45a3f49c?iframe=true" width="833px" height="auto" style="display:block; margin:0 auto; border:none;"></iframe> </div> </div>

▼CSS

div#sample1 { width: 100%; height: auto; margin: 0 auto; } .sample2 { width: 833px; margin: 0 auto; }

▼javascript(http://yyy.comのHTML内に記入)

<script> window.addEventListener('message', function(e) { var iframe = $("#fugapage"); var eventName = e.data[0]; var data = e.data[1]; switch(eventName) { case 'setHeight': iframe.height(data); break; } }, false); </script>

▼javascript(http://xxx.com)

window.onload = function() { var height = document.getElementsByTagName("html")[0].scrollHeight; window.parent.postMessage(["setHeight", height], "*"); } }

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

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

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

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

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

kei344

2018/02/17 04:42

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
x_x

2018/02/19 02:46

2ページ目とは?
guest

回答1

0

ベストアンサー

postMessageはテキストしか渡せないはずです。

js

1// window.parent.postMessage(["setHeight", height], "*"); 2// ↓ 3 window.parent.postMessage(JSON.stringify(["setHeight", height]), "*");

【window.postMessage - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/postMessage

構文
otherWindow.postMessage(message, targetOrigin);
(中略)
message
他のウィンドウに送られる文字列データ。

投稿2018/02/24 15:13

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問