js制御iframeスクロールバー移動
5690 ワード
.floatWin1{ width:154px; position:absolute;}
.bigwin_top{ background:url(images/windows_38.png) no-repeat; width:154px; height:16px;}
/* .bigwin_bor{ background:url(../images/windows_40.png) repeat-y; width:154px; height:70px; padding-top:50px; text-align:center;}*/
.bigwin_bor{ background:url(images/windows_40.png) repeat-y; width:154px; height:120px; }
.bigwin_bottom{ background:url(images/windows_42.png) no-repeat; width:154px; height:8px;}
<!-- -->
<div id="floatWin5" class="floatWin1" style="top:380px; right:60px;display: none;" onmouseup="imgSeup()" >
<div class="bigwin_top" id="bigwin_top"></div>
<div class="bigwin_bor" id="bigwin_bor">
<div id="bigwin_bor2" style="position:relative ;border: 1px solid red;overflow: hidden;">
<div onmousedown="imgDown()" onmousemove="event_move()" onmouseup="imgSeup()" style="position: absolute;left:0px;top:0px;cursor:move;width:24px;" class="imgSearch" id="imgSearch"><img src="images/icon_72.png"/></div>
</div>
</div>
<div class="bigwin_bottom"></div>
</div>
<div id="testIframe"></div>
<!--/ iframe/-->
<div style="border:solid 1px #aaa;padding:5px; width:1024px;text-align:center;" >
<script type="text/javascript">
// , 。
//
document.write('<iframe id="spanData2" src="Paint.htm" width="1024px" height="640px" frameborder="0" style="border:solid 1px #555588;overflow:scroll;"></iframe>');
var Editor=self.frames[0];
// 。
</script>
</div>
<script>
//
var mapFlag=true;
var ifrHeight
var ifrWidth
// 154/ 120
var bor_width=150;
var bor_height=120;
var bor_n=bor_width/bor_height;
var win_Width=0;
var win_Height=0;
function showMapWidows(){
if (mapFlag){
$('#floatWin5').css({display:''});
// iframe
ifrHeight=document.getElementById('spanData2').contentWindow.document.body.scrollHeight;
ifrWidth=document.getElementById('spanData2').contentWindow.document.body.scrollWidth;
if (ifrHeight==null || ifrHeight==0 || ifrHeight==''){
ifrHeight=document.getElementById('spanData2').scrollHeight;
}
if (ifrWidth==null || ifrWidth==0 || ifrWidth==''){
ifrWidth=document.getElementById('spanData2').scrollWidth;
}
//
if ((ifrWidth/ifrHeight)>bor_n){
win_Height=bor_width/(ifrWidth/ifrHeight);
win_Width=bor_width;
}else if ((ifrWidth/ifrHeight)>1 && (ifrWidth/ifrHeight)<bor_n){
win_Width=bor_height*(ifrWidth/ifrHeight);
win_Height=bor_height;
}else {
win_Width=bor_height*(ifrWidth/ifrHeight);
win_Height=bor_height;
}
//
$('#bigwin_bor2').width(win_Width);
$('#bigwin_bor2').height(win_Height);
//
var paddingLeft=Math.floor(Math.floor(bor_width-win_Width)/2);
var paddingTop=Math.floor(Math.floor(bor_height-win_Height)/2);
$('#bigwin_bor2').css({"margin-left" : paddingLeft+"px"});
$('#bigwin_bor2').css({"margin-top" : paddingTop+"px"});
mapFlag=false;
}else {
$('#floatWin5').css({display:'none'});
mapFlag=true;
}
}
//
var imgSearch=document.getElementById('imgSearch');
function event_move(){
if(window.event.button!=1){//
return;
}
var cx=event.clientX;
var cy=event.clientY;
if (downFlag){
var pLeft=(cx+il-ix);
var pTop=(cy+it-iy);
// ,
if (pLeft>(win_Width-16)){
pLeft=win_Width-16;
}else if (pLeft<0){
pLeft=0;
}
if (pTop>(win_Height-16)){
pTop=win_Height-16;
}else if (pTop<0){
pTop=0;
}
//
imgSearch.style.pixelLeft=pLeft;
imgSearch.style.pixelTop=pTop;
// iframe
Editor.testIframe(pTop,pLeft*3.2);
}
}
var downFlag=false;
var ix=0,iy=0;
var il=0,it=0;
function imgDown(){//
imgSearch.setCapture();
ix=event.clientX;
iy=event.clientY;
il=parseInt(imgSearch.style.left);
it=parseInt(imgSearch.style.top);
downFlag=true;
}
function imgSeup(){//
imgSearch.releaseCapture();
downFlag=false;
}
</script>
iframeのコード
<script>
function testIframe(sTop,sLeft){ document.documentElement.scrollTop=sTop;
document.documentElement.scrollLeft=sLeft;
}
</script>