SPOTブログ
2012/01/25
クロスドメインのiFrameで高さ(height)を自動取得して調整する方法
クロスドメイン（別ドメイン）のhtmlをiframeで読み込んだ場合、セキュリティの都合でiframe内のdomを操作することができません。
同じドメイン内のhtmlをiframeで埋め込む場合なら、DOMでheightを取得して自動で調整することが簡単にできるのですが、クロスドメインの場合は難しいようです。
最初はpostMessageで通信して値を受け渡す方法を試したのですが、IE8以前にはpostMessageが実装されていないため、動作しません。
そこで、見つけたのがこの方法。
このサンプルだと、小サイトではjQueryを使って文字サイズを自動で可変するようになっていて、setIntervalでheightを取得し直すようになっていますが、そのような必要がない場合は
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
window.onload = function(event) { window.setInterval(publishHeight, 300); } $(function() { var $content = $("#content"); function toggleFontSize() { if ($content.css("font-size") == "22px") { $("#content").animate({ fontSize: "15px" }); } else { $("#content").animate({ fontSize: "22px" }); } } var int = setInterval(toggleFontSize, 5000); }); |
を
|
1 2 3 |
window.onload = function(event) { publishHeight(); } |
としてあげれば、OKです。
jQueryを読み込む必要も無いです。
他にもっとスマートな方法がアリそうなのですが、いい方法があればぜひ教えてください！
関連記事一覧
2012/01/30
facebookページのiframeでイイネをしてくれた人とそうでない人に別のページを見せる方法
facebookページでよくある「いいね」してない人には情報をチラ見せして、イイネを誘導するページの作り方を勉強しました。
やりかたとしては、いいねを押したかどうかを判別して、イイネしてくれた人に...続きを見る
2011/08/16
ウェスティンナゴヤキャッスルで開催のミッフィーワールドに行ってきました
皆様、暑い日が続いていますが、いかがお過ごしでしょうか？
スタッフの のりプー です。
しばらく開業準備で忙しかったのですが、今回お盆休みにひさびさにゆっくりする時間が取れたので、ウェスティン名古屋...続きを見る
2012/01/04
IEでネガティブマージンを適用すると、はみ出した部分が消える問題
HTMLで画像等を配置する際に、レイアウトを微調整するためにネガティブマージン（マイナス方向へのマージン）を設定することがよくあります。
ですが、ネガティブマージンを使用した場合、IEだと上図のよう...続きを見る
2012/11/19
パララックスなjQueryスライダーSequence.jsがIEではロード中で止まってしまう件の解決方法
追記2013-1/15： v0.8 18/11/2012のアップデートにて、この問題は解決したそうです。（未確認）
最近はやりの技術といえば、やはりパララックス(parallax)。
視差効果を使っ...続きを見る
リンク
![はたらくホームページ制作なら、愛知県名古屋市の株式会社SPOT [スポット]](http://spot-web.jp/wp-content/themes/spot-web.jp/images/common/header-logo.png){kind=logo}