Flash:ブラウザのスクロール状態を取得
2009.11.26
タイトルの通り、ブラウザのスクロールバーの位置を取得するだけのスクリプトです。
あんまり使い道がなさそうですが、フル画面 Flash にできず、かつ縦長の Flash で、Lightboxっぽい動きをさせたいときとかにあると便利かもしれません。。

JavaScript でブラウザの情報を取得して、その情報を Flash で受け取ります。

【!】FireFoxで上手く動かないようなので、スクリプトを修正しました。
新しい記事にまとめていますので↓こちらをご覧ください。


Flash:ブラウザのスクロール状態を取得(修正版)

■JavaScript
JS のほうは Archiva さんの記事を参考にさせていただきました~。

ページサイズやスクロール位置を取得する

ブラウザ互換も考えられていてとても助かりました。
Safari 未対応っぽく書いてありますが、普通に動きましたし。

こちらのスクリプトを使わせていただいて、



// UA判別 --------------------------------------------
var isWin9X = (navigator.appVersion.toLowerCase().indexOf('windows 98')+1);
var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0);
var isOpera = (navigator.userAgent.toLowerCase().indexOf('opera')+1?1:0);
if (isOpera) isIE = false;
var isSafari = (navigator.appVersion.toLowerCase().indexOf('safari')+1?1:0);

// スクロール量 ---------------------------------
function getScrollPosition() {
	var obj = new Object();
 
	obj.x = document.documentElement.scrollLeft || document.body.scrollLeft;
	obj.y = document.documentElement.scrollTop  || document.body.scrollTop;
	
	return obj;
}

// 表示領域サイズ -------------------------------
function getScreenSize() {
	var obj = new Object();
 
	if (!isSafari && !isOpera) {
		obj.x = document.documentElement.clientWidth  || document.body.clientWidth  || document.body.scrollWidth;
		obj.y = document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight;
	}
	else {
		obj.x = window.innerWidth;
		obj.y = window.innerHeight;
	}
 
	return obj;
}

// flashにデータを送る準備 ----------------------------

//横スクロール位置
var scrollX ={};
//Flashにデータを送る
function getData_sX(){
	scrollX.data = getScrollPosition().x;
	return scrollX.data;
}

//縦スクロール位置
var scrollY ={};
function getData_sY(){
	scrollY.data = getScrollPosition().y;
	return scrollY.data;
}

//ウインドウ横幅
var windowX ={};
function getData_wX(){
	windowX.data = getScreenSize().x;
	return windowX.data;
}

//ウインドウ縦幅
var windowY ={};
function getData_wY(){
	windowY.data = getScreenSize().y;
	return windowY.data;
}

//ドキュメント横幅
var documentX ={};
function getData_dX(){
	documentX.data = document.documentElement.scrollWidth || document.body.scrollWidth;
	return documentX.data;
}

//ドキュメント縦幅
var documentY ={};
function getData_dY(){
	documentY.data = document.documentElement.scrollHeight || document.body.scrollHeight;
	return documentY.data;
}


このようなJSファイルを作りました。
このスクリプトでブラウザの情報を取得します。Flash から関数を呼び出すと、そのときの状態を変数に入れる感じです。

これを html のヘッダーで読み込んでおきます。


■Flash
Flash からは、関数を実行させる指示を出します。
1行目で、JS と通信するための ExternalInterface クラスを読み込みます。



import flash.external.*;

//JSからデータを受け取る
onEnterFrame = function(){
	//横スクロールの位置 取得
	data_sX = String(ExternalInterface.call("getData_sX"));
	text_sX.text = data_sX; //テキストで表示
	
	//縦スクロールの位置 取得
	data_sY = String(ExternalInterface.call("getData_sY"));
	text_sY.text = data_sY;
	
	//ウインドウの横幅 取得
	data_wX = String(ExternalInterface.call("getData_wX"));
	text_wX.text = data_wX;
	
	//ウインドウの縦幅 取得
	data_wY = String(ExternalInterface.call("getData_wY"));
	text_wY.text = data_wY;
	
	//ドキュメントの縦幅 取得
	data_dX = String(ExternalInterface.call("getData_dX"));
	text_dX.text = data_dX;
	
	//ドキュメントの横幅 取得
	data_dY = String(ExternalInterface.call("getData_dY"));
	text_dY.text = data_dY;
}


今回は onEnterFrame を使って絶えず情報を取得していますが、
もっと上手い方法があるような・・?


以上です。
せっかく作ったのでサンプルも置いておきますね。
サンプル

コメント(2)

ちょうどこのような機能を探しておりまして、拝見させていただきました。
しかしどうも、FireFox(win,ver3.6.2)ですと、ウインドウの高さが、ドキュメントの高さと等しくなってしまうようです。
また、Opera(win,ver10.10)ですとスクロールの値が取得できていないようです。

Archivaさんのページの、Javascript単体のものでは値を取得できているようなのですが…。
Flashを絡めたクロスブラウザの実現はなかなか大変そうですね…。

 

qawsさん、コメントありがとうございます。
確認してみましたが、たしかにブラウザによって挙動がおかしくなっていますね・・。
仰る通りArchivaさんのものはバッチリ動作しているので、こちらで手を加えた部分の問題のようです。
なるべく早めに修正いたします。
ご報告、ありがとうございました!

 



月別アーカイブ