iframe内のコンテンツを親からスクロールさせる

iframe内コンテンツのスクロールを親のボタンから操作する方法です。
普通にWeb制作をしている上でiframeを使う事はあまりないと思うので実用的かどうかは…。

Demo
Download demo files

今回は、iframe内コンテンツでfunctionを作っておいて、それを親から実行することで実現させてます。
なのでiframe内に表示するコンテンツは外部のサイトとかはだめです。自分で作ったやつだけです。
以降面倒なので、親コンテンツは「親」、iframe内コンテンツを「子」とします。

ところで、例によってjQueryを使っているので親・子共にjQueryを読ませておきます。
サンプルでは一番上にきたら↑が押せなくなったり、下にきたら↓が押せなくなったりしますがそれは考えないでおきましょう。それが気になる人はサンプルのソースを見てください。

用意するHTML

input#up, input#downを押したときにスクロールできるようにします。

<iframe id="frame" src="sample.html" scrolling="no">インラインフレーム</iframe>

<p><input type="button" id="down" value="↑" />
<input type="button" id="up" value="↓" /></p>

子で記述しておくスクリプト

これ自体はとてもシンプルでeasingScrollで使ったように、コンテンツをスクロールさせるスクリプトを記述してます。親から実行するときに動作を決めるために、引数を2つ取るようにしてます。

condは’starter’, ‘up’, ‘down’、optionsは下の通りdurationとか決めれます。
starterは開始時にずれてたら一番上にスクロールさせるための指定です。

ちなみに親から参照する関係で、(function($){})(jQuery);内に記述できないので$はjQueryとしました。

function frameScroll(cond,options){

	// オプション - 呼び出し元で指定
	var c = jQuery.extend({
		duration: 200,
		easing: 'swing',
		step: 300
	},options || {});

	// frameScroll内で使う変数
	var d = document,
		content = jQuery.support.boxModel ? navigator.appName.match(/Opera/) ? 'html' : 'html,body' : 'body',
		scrollPos = d.body.scrollTop || d.documentElement.scrollTop;

	// starterなら一番上、upなら上へ、downなら下へ
	this.scrollTop = cond.match(/starter/) ? 0 : cond.match(/up/) ? scrollPos+c.step : scrollPos-c.step;

	// すくろおおおる
	jQuery(content).animate(
		{
			scrollTop: this.scrollTop
		},
		{
			duration: c.duration,
			easing: c.easing,
			queue: false
		}
	);
}

親に記述するスクリプト

親からiframe内のスクリプトを実行する、と冒頭で書きましたが実行方法など含めてiframe関連処理はcyokodogさんがまとめてくれてます。

$('iframe')[0].contentWindow

でiframe内のオブジェクトを参照できるので、iframe内で書かれたfunctionは

$('iframe')[0].contentWindow.func()

で実行できます。さっきのframeScrollを実行するときは

$('iframe')[0].contentWindow.frameScroll('up',{
	step: 400
});

のように実行できます。これらをふまえると

jQuery(function($){

	// iframe内のドキュメントの読み込み完了時
	$('#frame').load(function(){
		// iframe内のドキュメントがスクロールした状態であれば一番上に移動させる
		$('#frame')[0].contentWindow.frameScroll('starter');
	});

	// #upをクリック
	$('#up').click(function(){
		// スクロールさせる
		$('#frame')[0].contentWindow.frameScroll('up');
	});

	// #downをクリック(処理は↑と同じ
	$('#down').click(function(){
		$('#frame')[0].contentWindow.frameScroll('down');
	});

	$('#up,#down').hover(function(){
		$(this).addClass('hover');
	},function(){
		$(this).removeClass('hover');
	});

});

こっちも説明の必要がないくらいかなりシンプルに書けました。
親では読み込み時に実行してしまえばいいので、jQuery(function($){});内に記述しています。

実際のサンプルではこれに加えて、一番上・一番下に移動したらボタンを押せなくするという処理を加えています。あと横に移動させたいときはanimateのscrollTopをscrollLeftにしたりして対応できます。

忘れてた、、今回使ってないですが、スクロールにanimateを使っているのでeasingプロパティでeasingが使えます。easeOutBounceでぼよんぼよんしてください。

Demo
Download demo files