電気ウナギ的○○

About Home

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

shinoda (2014年5月29日 14:54)
お客さんのところでのデモ用に作った「ラーメンサーチャー」(笑)

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

電気ウナギ的○○

電気ウナギ的○○

About Back

コメント(0)

電気ウナギ的○○

電気ウナギ的○○

About Back

トラックバック(0)

トラックバックURL: https://blog.netandfield.com/mt/mt-tb.cgi/2980

電気ウナギ的○○

About This Site

電気ウナギ的○○
岩国在住。広島で働く超零細IT企業社長のいわゆる社長日記。
何か、酒と食い物のことばかり書いているようで・・・お察しのとおり、肥満体です:-)


2011/06/24
iPhone用サイト公開

Create with jQuery, jQTouch.


CLOSE