うーむ。Google Forms を嵌めた iframe の高さは自動調整できんか

お客さんのところでのデモ用に作った「ラーメンサーチャー」(笑)

問い合わせフォームもちゃんと作るのが面倒だったので、Google Forms を使ってちゃっちゃと作った。
組み込み用の iFrame 用のソースを吐いてくれるんで、それを

<iframe src="https://docs.google.com/forms/d/1Ql5Lqkq-<略>snmL1s4D0/viewform?embedded=true" width="320" height="1500" frameborder="0" marginheight="0" marginwidth="0">読み込み中...</iframe>

みたいに自分のページ内に貼り付けるわけだけど、iPhone 以外で見た時に幅、高さを最適化するように、

<iframe src="https://docs.google.com/forms/d/1Ql5Lqkq-<略>snmL1s4D0/viewform?embedded=true" width="100%" frameborder="0" marginheight="0" marginwidth="0">読み込み中...</iframe>
<script>
jQuery('iframe').iframeAutoHeight();
</script>

みたいにしてみた。でも、

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://ramen.nandf.jp" from accessing a frame with origin "https://docs.google.com".  The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

ってエラーになっちゃうな。

これは http のサイト内から https のサイトを iFrame ではめ込んでいるから出てる SecurityError だけど、プロトコルを http に合わせても、

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://ramen.nandf.jp" from accessing a frame with origin "http://www.exsample.co.jp". Protocols, domains, and ports must match. 

ってなって駄目。どっちみち SecurityError だ。

クロスドメイン(親ページのドメインと、iFrame 内のページのドメインが違う)にはまだ対応してないんだなあ。
jQuery のバージョンは 1.11.0 だから十分新しい。いずれ対応するという話をずいぶん前に聞いたことあったけど、まだまだしてないってことなんだろう。

動的にデザイン変更したい場合は、Google Forms 使わずに自前でフォームを書けってことだな。

仕事で受注できたらそうしよう。
取り敢えず、デモサイトは「iPhone 限定。他のスマホで見るとレイアウト変かもよ。デモなんでごめんちゃい」で行くこととしよう。

・・・と思ってたら、PC や Android じゃ駄目だったけど、iPhone だけは自動でいい感じに高さ調節できてるな(^^;

20140529_google_forms1.jpg

ま、iPhone だけじゃ、意味がないんだけどな(^^;

トラックバック(0)

このブログ記事を参照しているブログ一覧: うーむ。Google Forms を嵌めた iframe の高さは自動調整できんか

このブログ記事に対するトラックバックURL: https://blog.netandfield.com/mt/mt-tb.cgi/2980

コメントする

このブログ記事について

このページは、shinodaが2014年5月29日 14:54に書いたブログ記事です。

ひとつ前のブログ記事は「puTTY のセッション一覧が化ける件」です。

次のブログ記事は「「ラーメンサーチャー」Ver 0.70002 公開」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。


月別 アーカイブ

電気ウナギ的○○ mobile ver.

携帯版「電気ウナギ的○○」はこちら