`
piziwang
  • 浏览: 239990 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

跨无限级iframe框架计算位置position[x, y]

阅读更多

代码摘自“泽元软件-ZCMS”,作为自己学习之用:

(转载请注明代码来自“泽元软件-ZCMS”)

 

var isIE=navigator.userAgent.toLowerCase().indexOf("msie")!=-1;
var isIE6=navigator.userAgent.toLowerCase().indexOf("msie 6.0")!=-1;
var isIE7=navigator.userAgent.toLowerCase().indexOf("msie 7.0")!=-1&&!window.XDomainRequest;
var isIE8=!!window.XDomainRequest;
var isGecko=navigator.userAgent.toLowerCase().indexOf("gecko")!=-1;
var isQuirks=document.compatMode=="BackCompat";


 function $(a){
	if(typeof(a)=="string"){
		a=document.getElementById(a);
		if(!a){
				return null	
		 }
	}else{
		return a;	
	}
	
 }

 function getEvent(a){
	return window.event||a	
 }
 
  function stopEvent(a){
		a=getEvent(a);
		if(!a){
				return;	
		 }
		if(isGecko){
				a.preventDefault();
				a.stopPropagation()	
		 }
		a.cancelBubble=true;
		a.returnValue=false	
 }

 function getEventPosition(evt){
 	
	evt = window.event || evt;
	
	var f={x:evt.clientX, y:evt.clientY};
	var d, srcEle = (evt.srcElement ? evt.srcElement : evt.target);
	if(isGecko){
			d = srcEle.ownerDocument.defaultView	
	 }else{
			d = srcEle.ownerDocument.parentWindow	
	 }
	var a,c;
	while(d != d.parent){
		if(d.frameElement){
				pos2 = $E.getPosition(d.frameElement);
				f.x += pos2.x;
				f.y += pos2.y	
		 }
			a = Math.max(d.document.body.scrollLeft, d.document.documentElement.scrollLeft);
			c = Math.max(d.document.body.scrollTop, d.document.documentElement.scrollTop);
			f.x -= a;
			f.y -= c;
			d = d.parent	
	 }
	return f	
 }
 
 var $E = {};
 
 $E.getPosition=function(m){
		m=m||this;
		m=$(m);
		var k=m.ownerDocument;
		if(m.parentNode===null||m.style.display=="none"){
			return false	
 		}
		var l=null;
		var j=[];
		var g;
		if(m.getBoundingClientRect){
			
			g=m.getBoundingClientRect();
			var c=Math.max(k.documentElement.scrollTop,k.body.scrollTop);
			var d=Math.max(k.documentElement.scrollLeft,k.body.scrollLeft);
			var b=g.left+d-k.documentElement.clientLeft;
			var a=g.top+c-k.documentElement.clientTop;
			if(isIE){
					b--;
					a--	
			 }
			return {x:b,y:a	}
	
 }else{
 	
	if(k.getBoxObjectFor){
				g=k.getBoxObjectFor(m);
				var h=(m.style.borderLeftWidth)?parseInt(m.style.borderLeftWidth):0;
				var f=(m.style.borderTopWidth)?parseInt(m.style.borderTopWidth):0;
				j=[g.x-h,g.y-f]	
		 }
	
 }
	if(m.parentNode){
		l=m.parentNode	
 	}else{
		l=null	
 }
	while(l&&l.tagName!="BODY"&&l.tagName!="HTML"){
			j[0]-=l.scrollLeft;
			j[1]-=l.scrollTop;
		if(l.parentNode){
				l=l.parentNode	
		 }else{
				l=null	
		 }
	
 }
	return{x:j[0],y:j[1]}
	
 };
 
$E.getPositionEx=function(c){
	c=c||this;
	c=$(c);
	var f=$E.getPosition(c);
	var d=window;
	var a,b;
	while(d!=d.parent){
		if(d.frameElement){
				pos2=$E.getPosition(d.frameElement);
				f.x+=pos2.x;
				f.y+=pos2.y	
		 }
		a=Math.max(d.document.body.scrollLeft,d.document.documentElement.scrollLeft);
		b=Math.max(d.document.body.scrollTop,d.document.documentElement.scrollTop);
		f.x-=a;
		f.y-=b;
		d=d.parent	
	 }
	return f	
 };
 
$E.getParent=function(a,b){
		b=b||this;
		b=$(b);
		while(b){
				if(b.tagName.toLowerCase()==a.toLowerCase()){
						return $(b)	
				 }
				b=b.parentElement	
		 }
		return null	
 };

$E.getParentByAttr= function(a,c,b){
		b=b||this;
		b=$(b);
		while(b){
				if(b.getAttribute(a)==c){
						return $(b)	
				 }
				b=b.parentElement	
		 }
		return null	
 };
 
$E.getTopLevelWindow= function(){
		var a=window;
		while(a!=a.parent){
				a=a.parent	
		 }
		return a	
};
 

 

 

分享到:
评论

相关推荐

    可以左右拖动的iframe框架

    在鼠标移动过程中,通过计算鼠标的移动距离并更新iframe的位置;最后,当用户释放鼠标时,停止更新。这样的交互设计使得用户可以自由调整iframe的位置,增强了用户界面的动态性和交互性。 **框架布局** 这种左右...

    lhgdialog文件加跨iframe框架使用

    在这个主题中,“lhgdialog文件加跨iframe框架使用”意味着我们将探讨如何在含有iframe的页面结构中利用lhgDialog进行交互。 首先,我们来看一下lhgDialog的基本用法。lhgDialog提供了丰富的选项和方法,可以定制...

    在iframe框架中打开页面的方法

    此外,跨站脚本攻击(XSS)和其他安全问题也可能出现,因此在使用iframe时需要特别注意这些潜在风险。 在实际开发中,确保iframe内容加载后可以正确显示和交互,开发者需要确保目标页面的域名和协议与主页面兼容,...

    iframe框架中实现打开多窗口方法

    然而,在iframe框架中实现打开多窗口的方法,则是一项更为高级且实用的技术。本文将基于给定文件的信息,深入探讨在iframe框架中实现多窗口打开的方法及其背后的原理。 ### 关键知识点一:`target`属性与`name`属性...

    iframe框架后台模板

    【iframe框架后台模板】是一种基于iframe技术构建的静态前端管理系统,其主要特点是利用iframe的特性来实现多页面的集成和管理。在Web开发中,iframe(Inline Frame)是一种嵌入式框架,允许在一个HTML文档中嵌入另...

    JAVASCRIPT让IFRAME框架的高度自适应

    让IFRAME框架的高度自适应页面 在网页开发中,使用IFRAME框架来嵌套其他网页内容是一种常见的做法。但是,IFRAME框架的高度无法自动调整以适应页面内容的变化,这就会导致用户体验不佳。为了解决这个问题,我们可以...

    iframe框架使用(完美版)

    "iframe框架使用(完美版)"这一主题着重讲解了如何高效、灵活地运用iframe,并解决其中的一些常见问题,如自适应高度的设定以及通过JavaScript进行封装。 首先,我们要理解iframe的基本用法。`<iframe>`标签通常包含...

    iframe框架上传.rar

    在ASP(Active Server Pages)开发...Iframe框架通常用于异步上传,通过隐藏的iframe来接收服务器返回的结果,使得上传操作不会刷新整个页面,提供更好的用户体验。用户可以解压文件,查看示例代码,了解具体实现细节。

    iframe框架与主框架通信模块例子.zip

    在网页开发中,有时我们需要在不同的域之间进行通信,特别是在使用iframe框架时。"iframe框架与主框架通信模块例子.zip" 提供了一个解决方案,它演示了如何在iframe和其父页面(即顶层页面)之间实现跨域通信。这种...

    iframe-scroll-position:与 iframe-resizer 一起使用,将父框架的当前滚动位置发送到 iframe 内容窗口

    总的来说,`iframe-scroll-position`与`iframe-resizer`的结合使用提供了一种强大的工具,帮助开发者创建更加交互性和一致性的跨框架用户体验。它们解决了`iframe`在尺寸调整和滚动同步上的常见问题,使得`iframe`能...

    用DIV仿iframe框架布局效果

    这个主题,“用DIV仿iframe框架布局效果”,将深入探讨如何使用纯前端技术来模拟一个可独立滚动的内容区域。 首先,我们需要理解iframe的基本概念。Iframe,即内联框架,是一种在HTML文档中嵌入另一个HTML文档的...

    跨帧无限级菜单

    跨帧的无限级下拉菜单 大家都知道在IE中,存在frameset,freame,iframe三种帧元素,他们在布局中运用广泛,而且也很实用,但是有时候使用起来还是有一些小麻烦。如你是做相关框架或者是企业管理软件的,需要使用到它...

    iframe 框架透明背景

    "iframe框架透明背景"这个主题涉及到如何在`iframe`中设置背景为透明,以便于它与父页面更好地融合,营造出如同支付宝首页那样的视觉效果。 首先,我们需要了解`iframe`的基本语法。`iframe`标签在HTML中是这样写的...

    Iframe框架高度自适应的实现.doc

    Iframe框架高度自适应是一个重要的需求,特别是在内容动态更新或者跨域通信时,确保用户无需滚动两个独立的滚动条来查看全部内容。本篇文章将详细解释如何实现Iframe框架高度自适应,并分析给定代码的工作原理。 ...

    jquery 跨iframe拖拽

    首先,我们要理解IFrame(内联框架)的概念。IFrame是一种在HTML页面中嵌入另一个HTML页面的技术,常用于实现页面的部分更新或在单个页面内展示多个独立的内容区域。然而,由于浏览器的安全策略,不同源的IFrame之间...

    HTML 折叠框架 iframe

    折叠框架通常通过JavaScript库或CSS样式来实现。例如,jQuery和Bootstrap框架提供了丰富的折叠和展开功能。在jQuery中,我们可以使用`.slideToggle()`方法来实现元素的滑动折叠效果;而在Bootstrap中,我们可以利用...

    iframe框架用法收藏

    ### Iframe框架用法详解 #### 一、Iframe标记简介及基本用法 Iframe,全称为**Inline Frame**,是一种特殊的HTML标签,用于在当前网页中嵌入另一个HTML文档或其他类型的文件,如图像、视频等。它可以看作是一个...

    解决iframe中fixed失效的问题

    这种方法需要计算 `iframe` 在页面中的位置以及用户的滚动位置。 3. **CSS Hack**: - 一种常见的技巧是将 `iframe` 的 `position` 设置为 `relative` 或 `absolute`,并将其 `z-index` 设置得很高,使 `fixed` ...

    跨框架示例(iframe).rar

    这个"跨框架示例(iframe).rar"压缩包提供了两个示例文件——frames.htm和x.html,它们展示了如何利用iframe实现跨框架的交互和功能,特别是针对Firefox和IE6及更高版本浏览器的支持。 1. **iframe的基本概念** - `...

    ACE_iframe框架版.rar

    ACE_iframe框架版是一个基于ACE后台管理模板的实现,它采用了iframe框架来构建多页面的后台管理系统。这个框架因其简洁、高效和强大的功能而在IT行业中备受推崇,尤其适合开发人员进行后台界面的设计与开发。 首先...

Global site tag (gtag.js) - Google Analytics