ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
IFRAME ウインドウを非表示から開く時の位置調整
日時: 2014/03/06 14:31
名前: lightbox



要するに重要なのは、obj.style.top = ((document.documentElement.scrollTop || document.body.scrollTop)+10) + "px"; です。

これ以上は、IFRAME を初回にロードする時の待機時に、『CSS だけで回る、実行中アイコン』等を実装すればもっといいですね

<script type="text/javascript">
// *********************************************************
// IFRAME を開く
// *********************************************************
function openIframe( ev, strNo, strUrl ) {

	var obj = document.getElementsByName("iframe" + strNo )[0];
	obj.style.top = ((document.documentElement.scrollTop || document.body.scrollTop) + ev.clientY + 10) + "px";
	obj.style.left = ( ev.clientX + 200 ) + "px";
	var src = obj.src;
	if ( src + '' == '' ) {
		obj.src = strUrl;
		obj.onload = function() {
			document.getElementsByName("iframe" + strNo )[0].style.display = "";
		}
	}
	else {
		obj.style.display = "";
	}
}
// *********************************************************
// IFRAME を閉じる
// *********************************************************
function closeIframe( strNo ) {

	var obj = document.getElementsByName("iframe" + strNo )[0];
	obj.style.display = "none";
}
</script>
<iframe
	name="iframe1"
	frameborder="1"
	scrolling="yes"
	width="500"
	height="500"
	style='position:absolute;display:none;'
></iframe>


<div style='padding-top:200px;padding-bottom:1000px;'>
<input type="button" value="開く" onclick='openIframe(event, "1","http://winofsql.jp")'>
<input type="button" value="閉じる" onclick='closeIframe("1")'>
</div>
メンテナンス


日時: 2014/03/06 14:31
名前: lightbox