js控制iframe滚动条移动

最新推荐文章于 2025-03-18 14:46:57 发布

原创最新推荐文章于 2025-03-18 14:46:57 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #Web #html #ViewUI

web应用专栏收录该内容

8 篇文章

订阅专栏

本文探讨了如何通过JavaScript实现地图导航器与iframe元素的动态调整，包括地图导航器的显示与隐藏，以及根据iframe内容动态调整导航器大小和位置。


.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>