jQueryで親ページからiframeのスクロールバーを非表示にする方法
小粋空間 » JavaScript » jQuery » jQueryで親ページからiframeのスクロールバーを非表示にする方法
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()などと組み合わせた方がいいかもしれません。