2012-06-10

[jQuery] fancyboxのiframeでコンテンツの高さがおかしくなる

jQuery
fancybox(v2.0.6)のiframe機能を使って、あるHTMLページを表示させようとしたところ、
コンテンツの高さをheightで指定しているにもかかわらず、100pxくらいの小さい高さしか
表示されない現象が起こりました。

指定するページをYahooとかの外部サイトにすると問題なく表示されるのに、
自分のサイトのページだといくらやっても狭い表示に。。


調べてもそういった現象がなかったのでかなり困り果てつつも、
いろんなオプションを試していると、ついに発見しました!!

autoSize: false

このオプションを入れると見事に高さを保って表示されました!

それから、iframe表示にするのもJavascriptで指定するのではなくて、
data-fancybox-type=”iframe”とaタグに記述することで可能なようです。
いろいろと仕様が変わっているみたいですね。

Javascript
<script type=”text/javascript”>
$(function(){
$(“a.fancybox”).fancybox({
autoSize: false,
width:”90%”,
height:”90%”
});
});
</script>

HTML
<a href=”aaa.html” data-fancybox-type=”iframe” class=”fancybox”>fancyboxのiframe表示</a>

コメント / トラックバック 3 件

  1. サクランボ より:

    firefoxとsafariでiframeの高さが100になってしまい困っていたところでこちらの記事を拝見し、無事解決できました!
    ありがとうございます!

  2. nishi より:

    サクランボさん、コメントありがとうございます。
    お役にたてたとのことで、うれしいです。

    jQueryプラグインはバージョンなどでうまく動かないことがあったりして困りますよね。
    今後も気付いたことはメモしていきたいと思っています。

  3. […] [jQuery] fancyboxのiframeでコンテンツの高さがおかしくなる | around design […]

Comment:

Trackback URL: