コンテンツ制作のこと: 2014年5月アーカイブ

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

問い合わせフォームもちゃんと作るのが面倒だったので、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 だけじゃ、意味がないんだけどな(^^;

このアーカイブについて

このページには、2014年5月以降に書かれたブログ記事のうちコンテンツ制作のことカテゴリに属しているものが含まれています。

前のアーカイブはコンテンツ制作のこと: 2014年4月です。

次のアーカイブはコンテンツ制作のこと: 2020年10月です。

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


月別 アーカイブ

電気ウナギ的○○ mobile ver.

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