コメント |
要するに重要なのは、obj.style.top = (([[document.documentElement.scrollTop || document.body.scrollTop]])+10) + "px"; です。
これ以上は、IFRAME を初回にロードする時の待機時に、『http://logicalerror.seesaa.net/article/323408577.html(CSS だけで回る、実行中アイコン)』等を実装すればもっといいですね
@DIV
<script type="text/javascript">
// *********************************************************
// IFRAME を開く
// *********************************************************
function openIframe( @c:red(ev), strNo, strUrl ) {
var obj = document.getElementsByName("iframe" + strNo )[0];
obj.style.top = ((@c:red(document.documentElement.scrollTop || document.body.scrollTop)) + @c:red(ev.clientY) + 10) + "px";
obj.style.left = ( @c:red(ev.clientX) + 200 ) + "px";
var src = obj.src;
if ( src + '' == '' ) {
obj.src = strUrl;
@c:red(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>
@END
@DIV
<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(@c:red(event), "1","http://winofsql.jp")'>
<input type="button" value="閉じる" onclick='closeIframe("1")'>
</div>
@END
@HTML
<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:100px;padding-bottom:600px;'>
<input type="button" value="開く" onclick='openIframe(event, "1","http://winofsql.jp")'> <input type="button" value="閉じる" onclick='closeIframe("1")'>
</div>
@HEND |