`

js控制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>
  • 大小: 68.6 KB
分享到:
评论

相关推荐

    外部滚动条控制iframe

    2. **监听外部滚动条事件**:为外部的滚动容器(如div)添加滚动事件监听器,当外部滚动条移动时触发相应函数。 3. **同步iframe内部滚动位置**:在事件处理函数中,根据外部滚动条的位置,使用JavaScript设置...

    iframe 上下滚动条如何默认在下方实现原理

    这行代码会在整个页面加载完毕后执行,将滚动条移动到非常接近页面底部的位置。然而,这种方法的一个问题是,如果有新的消息被添加,滚动条不会自动滚动到新消息所在的位置。为了解决这个问题,我们需要动态地调整...

    jQuery.nicescroll美化滚动条

    // 初始化iframe滚动条 ``` 六、兼容性与优化 jQuery.nicescroll致力于提供良好的跨浏览器兼容性,支持现代浏览器如Chrome、Firefox、Safari、Edge以及IE8+。不过,需要注意的是,由于滚动条样式是由JavaScript...

    不随滚动条滚动的模式窗口

    在网页设计和开发中,"不随滚动条滚动的模式窗口"是一种常见的用户体验设计技术,它允许用户在当前页面上打开一个全屏或半屏的弹出窗口,而这个窗口不会随着页面的滚动条移动。这种效果常用于图片预览、表单填写、...

    IOS上iframe的滚动条失效的解决办法

    在iOS设备上,如iPad和iPhone,用户可能会遇到一个特定的问题,那就是在使用`iframe`时,滚动条无法正常工作。当`iframe`的内容高度超过其设定的高度时,内部HTML的滚动条不会显示,导致超出部分的内容无法查看,...

    layer.js open 隐藏滚动条的例子

    从描述来看,本文档提供了使用layer.js打开弹出层时隐藏滚动条的具体代码示例。代码示例中,layer.open函数是用于打开新的弹出层的关键函数。在layer.open的配置参数中,"scrollbar"属性被设置为false,这是用来控制...

    iframe显示全部内容代码

    - `scrolling`:控制`iframe`内部是否显示滚动条,可选值为`auto`、`yes`、`no`。 - `allowfullscreen`:允许`iframe`中的内容进入全屏模式。 #### 三、实现`iframe`显示全部内容的关键技术 为了确保`iframe`...

    jquery.nicescroll仿IOS滚动条美化插件.zip

    4. **与iframe集成**:如果需要在iframe中使用nicescroll,可以使用`iframefix: true`选项来处理滚动条覆盖iframe的问题。 四、实例应用 在提供的压缩包中,有两个HTML文件——`index.html`和`browser.html`。`...

    iframe控制实例

    这个“iframe控制实例”是关于如何使用`iframe`以及与其相关的JavaScript(JS)和CSS技术来实现更精细的页面布局和交互的实践教程。 首先,我们需要了解`iframe`的基本语法。在HTML中,`&lt;iframe&gt;`标签用于创建一个...

    解决iframe中fixed失效的问题

    ` 是CSS定位属性之一,它可以使元素相对于浏览器窗口进行定位,无论滚动条如何移动,元素始终保持在屏幕的某个位置。但在 `iframe` 中,由于浏览器的安全策略和渲染机制,`fixed` 定位可能不会按照预期工作。这通常...

    嵌入到HTML的iframe自动适应大小

    对于iframe而言,这意味着需要一种机制使其能够根据内部内容的变化或者外部容器的尺寸变化来自动调整自己的高度,从而避免出现滚动条或者内容被裁剪的情况。 ### 实现原理 自动调整iframe高度的核心在于监听页面...

    用DIV仿iframe框架布局效果

    `,这样当内容超出该区域时,会出现垂直滚动条,但不会影响整个页面的滚动。 2. **JavaScript动态加载**: - 使用JavaScript获取并设置内容区域的HTML内容。这可以通过AJAX请求实现,向服务器请求数据,然后将返回...

    javascript浮动div,可拖拽div,遮罩层(div和iframe实现)

    1. **获取页面尺寸信息**:`getNavWidthandHeightInfo()` 函数通过一系列 DOM 属性获取了页面的各种尺寸信息,如页面的宽高、滚动条的位置等。 2. **浮动 Div 的自动居中**:`MoveFloatLayer()` 函数通过计算页面...

    iframe标签实现网页部分刷新

    - `scrolling`: 控制iframe内的滚动条显示,可设为`yes`、`no`或`auto`。 二、`iframe`的应用场景 1. 部分网页刷新:利用`iframe`,我们可以只更新网页的某一部分,而无需整个页面刷新,提高加载速度,降低服务器...

    测试iframe全

    5. **尺寸动态调整**:使用`iframe`的`scrolling`属性(可设为`yes`、`no`或`auto`),以及JavaScript或CSS来控制滚动条的显示和内容区域的大小调整。 6. **内容加载事件**:`iframe`有一个`load`事件,当其内容...

    用iframe做的遮罩层

    为了让遮罩层支持页面滚动,我们需要确保`&lt;iframe&gt;`的滚动条设置正确。可以设置`&lt;iframe&gt;`的`scrolling`属性为`no`,然后在外部页面中处理滚动事件。至于拖动,可以通过监听鼠标事件,计算鼠标的移动距离,然后更新`...

    scrollpos-jbrowse:移动滚动条以在嵌入但不在 iframe 中时更好地定位

    scrollpos-jbrowse 在 iframe 之外使用 JBrowse 时,将基因组查看器上的滚动条向上移动 DOM 以使其与其他人一起使用。 开发由 USDA-ARS、玉米昆虫和作物基因组学研究组提供支持。

    meteor-jquery-nicescroll:感谢犬夜叉。 Nicescroll 是一个 jquery 插件,用于具有非常相似的 iosmobile 风格的漂亮的可定制滚动条。 它支持 DIV、IFrame 和文档页面(正文)滚动条。 兼容 Firefox 4+、Chrome 5+、Safari 4+ (winmac)、Opera 10+、IE 6+(所有 A 级浏览器)。 与 iOS 设备兼容,如 iPad、Android、黑莓、Windows Phone 以及许多移动和触摸设备

    它支持 DIV、IFrame 和文档页面(正文)滚动条。 兼容 Firefox 4+、Chrome 5+、Safari 4+ (win/mac)、Opera 10+、IE 6+(所有 A 级浏览器)。 与 iOS 设备兼容,如 iPad、Android、黑莓、Windows Phone 以及许多...

    frame,iframe.frameset用法和区别

    - **scrolling**: 控制框架内滚动条的显示,可选值包括 `yes`、`no` 和 `auto`。 - **noresize**: 若设置为 `noresize`,用户将无法手动调整框架大小。 ### `&lt;IFRAME&gt;` 与 `&lt;NOFRAMES&gt;` - **&lt;IFRAME&gt;**: 与 `...

Global site tag (gtag.js) - Google Analytics