关于Iframe和Frame框架的问题

我有一个框架结构的页面，分为上、左、右三个部分。需要在整个框架之上浮动一些窗口，还需要增加一些按钮什么的。使用Frame的时候不能在框架页面添加按钮、浮动窗口。如果把按钮、浮动窗口放到顶部页面又有可能被框架遮住。使用Iframe模拟Frame的结构，可以将按钮、浮动窗口都放在框架页面，但是框架不能拖动。于是参考一些程序，写了一个可以对左右框架进行拖动的函数，拖动是可以拖动了，但是，如果拖动时鼠标移动过快或者不平稳都会导致拖动不了，只有缓慢平稳拖动才行，不知道是怎么回事，大家帮忙看下。或者有没有办法实现我在顶部放一个浮动窗口，无论其多大都不会被Frame遮住。
Iframe程序如下：
Html:
<table style="WIDTH: 100%; HEIGHT: 100%" cellSpacing="0" cellPadding="0" border="0">
   <tr>
    <td id="frmTitle" style="WIDTH: 100%; HEIGHT: 84px" colSpan="3">
      <IFRAME id="BoardTitle" style="VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 100%"
       name="main"src="top.html" frameBorder="0" scrolling="no"></IFRAME>
    </td>
   </tr>
   <tr>
    <td colspan="3">
      <table cellSpacing="0" cellPadding="0" border="0" background="images/T7.gif">
        <tr>
<td align="center" width="100%"></td>
        </tr>
      </table>
     </td>
   </tr>
   <tr style="HEIGHT: 100%">
    <td style="WIDTH: 125pt" id="frmTitle1" vAlign="middle" align="center">
     <IFRAME id="BoardTitle1" style="VISIBILITY: inherit; WIDTH: 125pt; HEIGHT: 100%"
       name="main" src="Left.html" frameBorder="0" scrolling="auto"></IFRAME>
    </td>
    <td style="WIDTH: 15px;CURSOR: w-resize" background="images/T8.jpg">
     <table height="100%" cellSpacing="0" cellPadding="0" border="0">
      <tr>
       <td id="DragTd" style="WIDTH: 15px; HEIGHT: 100%" onmouseout='stopDrag();'
        onmouseup='stopDrag();'onmousemove='drag();' onmousedown='startDrag();'>
       </td>
      </tr>
     </table>
    </td>
    <TD width="100%">
      <IFRAME id="rightFrame" style="VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 100%"
       name="rightFrame" src="Right.html" frameBorder="0" scrolling="auto"></IFRAME>
    </TD>
   </tr>
  </table>
执行拖动的JavaScrip程序如下：
<script language="javaScript">
var dragObject = null;
//准备拖动
function startDrag()
{
if(window.event.srcElement.id == "DragTd")
{
dragObject=document.all("BoardTitle1")
  //记录鼠标和层位置
  x0 = event.clientX;
  StyleWidth=document.all("BoardTitle1").style.width;
  oldLeftWidth=parseInt(StyleWidth.substring(0,StyleWidth.length-2));
  window.event.returnValue = false;
  window.event.cancelBubble = true;
  }
  else {
dragObject = null;
}
}
//拖动
function drag()
{
if(dragObject)
  {
   newWidth=(oldLeftWidth + event.clientX - x0)+"px";
   dragObject.style.width =newWidth;
   window.event.returnValue = false;
indow.event.cancelBubble = true;
  }
}
//停止拖动;
function stopDrag()
{
  if(dragObject)
  {
   dragObject = null;
   }
}
</script>

11 个解决方案

#1

看到好煩。。幫頂了。

#2

嘿嘿，谢谢帮顶
拖动的主要原理是记录鼠标移动的距离，据此改变左边页面的宽度。老是感觉拖动的时候不顺畅。
html中：
改变的左边页面是这个：
<IFRAME id="BoardTitle1" style="VISIBILITY: inherit; WIDTH: 125pt; HEIGHT: 100%"
name="main" src="Left.html" frameBorder="0" scrolling="auto"></IFRAME>
触发拖动的是这个：
<td id="DragTd" style="WIDTH: 15px; HEIGHT: 100%" onmouseout='stopDrag();'
onmouseup='stopDrag();'onmousemove='drag();' onmousedown='startDrag();'>

#3

没人啊

#4

还是没人，好吧，我承认，我是很罗嗦

#5

drag(); 和 stopDrag();应该由body的onmousemove和onmouseup触发执行

看看下面这段代码,对你应该有用:

<html><head><title>可拖动的层</title></head>
<body>
<script>
var popDivDiffX=null;
var popDivDiffY=null;

function popDivMoveStart(){
popDivDiffX=event.x-popDiv.style.pixelLeft;
popDivDiffY=event.y-popDiv.style.pixelTop;
window.document.body.attachEvent("onmousemove",popDivMove);
window.document.body.attachEvent("onmouseup",popDivMoveStop);
popDiv.setCapture();
}
function popDivMove(){
if(popDivDiffX!=null){
if(event.x<10 || event.y<10){//>防止出界
popDivMoveStop();
return;
}
popDiv.style.pixelLeft=event.x-popDivDiffX;
popDiv.style.pixelTop=event.y-popDivDiffY;
}
}
function popDivMoveStop(){
if(popDivDiffX != null){
popDiv.releaseCapture();
popDivDiffX=null;
popDivDiffY=null;
window.document.body.detachEvent("onmousemove",popDivMove);
window.document.body.detachEvent("onmouseup",popDivMoveStop);
}
}

</script>
<div id="popDiv" onmousedown="popDivMoveStart();" style="width:50px;height:50;position:absolute;left:50px;top:100px;background-color:blue;cursor:move;">
</div>
</body>
</html>

#6

太感谢laochake(老茶客)了，本来都不抱什么希望了。呵呵。我测试对比了一下，发现不止是需要使用body的onmousemove和onmouseup事件，在此同时需要有popDiv.setCapture();和popDiv.releaseCapture();两个语句才行，不然还是同样的情况。去网上查了一下，这两个函数是用来捕捉鼠标的移动的。但是具体怎么运行的，怎么会导致那样的差别还是不太清楚。

#7

SetCapture

VB声明
Declare Function SetCapture Lib "user32" Alias "SetCapture" (ByVal hwnd As Long) As Long

说明
将鼠标捕获设置到指定的窗口。在鼠标按钮按下的时候，这个窗口会为当前应用程序或整个系统接收所有鼠标输入

返回值
Long，之前拥有鼠标捕获的窗口的句柄,

参数表
参数
hwnd Long，

类型及说明
要接收所有鼠标输入的窗口的句柄,

注解
我的理解：与ReleaseCapture函数一起使用，用于判断鼠标离开（mouseleave）事件

#8

ReleaseCapture

VB声明
Declare Function ReleaseCapture Lib "user32" Alias "ReleaseCapture" () As Long

说明
为当前的应用程序释放鼠标捕获

返回值
Long，TRUE（非零）表示成功，零表示失败

注解
我的理解：与SetCapture函数一起使用，用于判断鼠标离开（mouseleave）事件

#9

希望会对你有用。

#10

呵呵，多谢，领教了。
看看laochake(老茶客)给的程序，在看看自己拼出来的程序，这就是差距啊！

#11

留个记号

#1