Re:一个关于iframe的问题

hello_holly 2008-10-26 10:40:36

在DIV中放iframe(iframe中是链接的一个网址),DIV是可以随鼠标移动的,可是放进iframe以后,只能点到左上边界,才能移动,有没有哪位有办法可以直接点在随意位置可以移动的?
因为默认iframe是可以编辑的,鼠标一点,拖动的是里面的内容,而不是整个DIV,请大家帮忙.

...全文

258 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

lovegjj 2008-10-28

打赏
举报

先顶一下，也请各位大哥帮小弟解决先问题！
http://topic.csdn.net/u/20081028/09/6d2780e9-b256-486f-9628-59690d5ec9de.html
谢谢了！

hello_holly 2008-10-28

打赏
举报

8楼的例子就是我想要的结果，谢谢各位了！

cgisir 2008-10-27

打赏
举报

prtSc+ps
程序不清楚, 等高手来看下...

hello_holly 2008-10-27

打赏
举报

有没有办法将iframe中的内容动态转成图片的？

cgisir 2008-10-27

打赏
举报

如果iframe内容需要交互也不好说,因为你无法判断用户是想交互(比如点击iframe页面上的连接等),还是想拖动
如果不用交互可以这样试试, 在iframe上面蒙个DIV



<div style="position:absolute"> 

  <div style="width:100%; height:100%; background:#fff; filter:alpha(opacity = 0); opacity:0; position:absolute; z-index:100; top:0; left:0;">点击这里拖动... </div> 

  <iframe src=""....> </iframe> 

</div>

hello_holly 2008-10-27

打赏
举报

我的iframe本来就是放在DIV中的，现在iframe中的内容不需要编辑，只需要看到首页的内容就行，但是链接一些网页的首页每天都会变，所以里面也不能固定死，只能用链接的
像楼上的这样，再加一个DIV，这样不好看，而且一定要限制别人只能点这里。这种用过，有没有更好的办法。

cgisir 2008-10-27

打赏
举报

有点冲突了, 你可以在DIV里单独设置一个区域供用户拖动.
比如在iframe上边放个div什么的,设置一个高度,一个背景色或图片,这个区域作为拖动区域
像这样
<div>
<div style="height:21px; background:#ccc">点击这里拖动...</div>
<iframe src=""....></iframe>
</div>

yeah920 2008-10-27

打赏
举报

不懂，帮忙顶一下。

不悲不喜 2008-10-27

打赏
举报

不可能，
如果可以的话，你怎么对iframe内部进行操作？

bob_er 2008-10-27

打赏
举报

frame对象是整个浏览器窗口的子窗口,除了status,defaultStatus,name属性外,它拥有window对象的全部属性.
frame对象可以被窗口中的框架引用的对象，具有窗口对象的属性和方法。
格式：
top.frameName|frames[n].属性|方法
parent.frameName|frames[n].属性|方法

http://www.ccscript.cn/Content/2/107.aspx

---------

javascript之家,是新起的JS角本程序学习站点；
该站详细分类JS的基础,对象,极其应用；

http://www.ccscript.cn/

该站有多种当今流行的JS框架；
站内主打Jquery框架的基础及应用；
包括特效代码和展示特效；
站内同时提供多种其它WEB开发服务应用；

不悲不喜 2008-10-27

打赏
举报

同意5楼的意见。
不过没滚动条需要另外处理一下。

做了个sample供参考。



<html>

<head>

<script language="javascript"> 

var drag=0; 

var drawLeft=-1;//1,2,3,4,5 

var Mx=0,My=0,xx=0,yy=0,ww=0; 



window.onload=function() 

{ 

	var o = document.getElementById("div1"); 

	o.onmousedown = function(){  

		drag     =   1;  

		Mx=event.x;  

		My=event.y;  

		xx   =   o.offsetLeft;  

		yy   =   o.offsetTop;  

		ww   =   o.offsetWidth;  

	}   	 

	 //mousemove 

	o.onmousemove = function(){ 

		window.status = event.x + "," + event.y; 

			if(drag==1){ 

				this.style.top = yy + event.y - My; 

				this.style.left = xx+ event.x-Mx; 

			} 

		if(event.x>=o.offsetLeft 

			&& event.x<=o.offsetLeft + o.offsetWidth 

			&& event.y>=o.offsetTop 

			&& event.y<=o.offsetTop + o.clientTop){ 



			o.style.cursor="move"; 



			if(drag==1){ 

				this.style.top = yy + event.y - My; 

				this.style.left = xx+ event.x-Mx; 

			} 

		}else if((event.x>=o.offsetLeft 

			&& event.x<=o.offsetLeft + o.clientLeft) 

			&& (event.y>=o.offsetTop + o.clientTop 

			&& event.y<=o.offsetTop + o.clientHeight + o.clientTop)){ 

			

			o.style.cursor = "w-resize"; 

	 

			if(drag==1){ 

				 this.style.left=xx+Mx-event.x; 

				 this.style.width=ww+Mx-event.x;

			} 

		}else if((event.x>=o.offsetLeft + o.clientWidth 

					&& event.x<=o.offsetLeft + o.offsetWidth) 

					&& (event.y>=o.offsetTop + o.clientTop 

					&& event.y<=o.offsetTop + o.clientHeight + o.clientTop)){ 

			o.style.cursor = "e-resize"; 



			if(drag==1){ 

				//this.style.left=xx-Mx+event.x; 

				this.style.width=ww-Mx+event.x;

			} 

		}else if(event.x>=o.offsetLeft+o.clientLeft 

				&& event.x<=o.offsetLeft + o.clientLeft + o.clientWidth 

				&& event.y>=o.offsetTop + o.clientTop + o.clientHeight 

				&& event.y<=o.offsetTop + o.offsetWidth){ 

			o.style.cursor = "n-resize"; 

			

		}else if(event.x>=o.offsetLeft 

				&& event.x<=o.offsetLeft+o.clientLeft 

				&& event.y>=o.offsetTop+o.clientTop+o.clientHeight 

				&& event.y<=o.offsetTop+o.offsetHeight){ 

			o.style.cursor = "ne-resize"; 

		}else if(event.x>=o.offsetLeft+o.clientLeft+o.clientWidth 

				&& event.x<=o.offsetLeft+o.offsetWidth 

				&& event.y>=o.offsetTop+o.clientTop+o.clientHeight 

				&& event.y<=o.offsetTop+o.offsetHeight){ 

			o.style.cursor = "nw-resize"; 

		}else{ 

			o.style.cursor = "auto"; 

		} 



		if(event.eventType == 'mousedown') 

			alert('mousedown'); 

	} 

	o.onmouseup = function(){ 

		drag = 0; 

	} 

	document.body.onmouseup = function(){ 

		drag = 0; 

	} 

} 

</script>

</head>

<body>

	Move iframe

	

	<br >

	<div id="div1" style="background:#0; position:absolute; top:120; left:100; width:400; height:300;"> 

		<iframe frameborder="0" marginWidth="0" src="http://www.yahoo.co.jp" scrolling="no" style="width:400; height:300;">

		</iframe>

		<div style="width:100%; height:100%; background:#fff; filter:alpha(opacity = 0); opacity:0; position:absolute; z-index:100; top:0; left:0;"> 

		</div

	</div>

</body>

</html>