＞ ＞ ＞ jQueryで親ページからiframeのスクロールバーを非表示にする方法

jQueryで親ページからiframeのスクロールバーを非表示にする方法

Posted at July 10,2015 12:55 AM
Tag：[CSS, iframe, jQuery]

jQueryで親ページからiframeのスクロールバーを非表示にする方法を紹介します。

１．問題点

次のようなiframeページがあるとします。

test.html

<html>
  <head>
    <meta charset="utf-8" />
    <title>test</title>
  </head>
  <body>
    <p>test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test
  </p>
</body>
</html>

このhtmlを親ページ

<iframe id="test" src="test.html"></iframe>

から読み込むと、下のスクリーンショットようにスクロールバーが表示されてしまいます。

スクロールバーを表示

スクロールバーを表示させたくないのですが、方法が分かりません。

iframeページに

body {
    overflow: hidden;
}

というCSSを設定すれば解決するのですがiframeページには手を加えることができません。

２．iframeのスクロールバーを非表示にする

iframeのスクロールバーを非表示にするには親ページに次のjQueryを設定します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
    $('#test').on('load', function(){
        $('#test').contents().find('body').css('overflow','hidden');
    });
});
</script>
<iframe id="test" src="test.html"></iframe>

これで次のようにスクロールバーが非表示になります。

スクロールバーを表示

仕組みについては「親ページからiframe内の要素にCSSを適用させる方法」を参照ください。

３．注意事項

サンプルでは、iframe要素とscript要素の順番を入れ替えると期待通りに動作しないようです。

また、iframeの内容によっても期待通りに動作しない可能性があります。

どうしてもjQueryをiframeに適用させたい場合はsetTimeout()などと組み合わせた方がいいかもしれません。

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


コメントする
greeting

*必須

*必須（非表示）


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）