拖拽改变iframe大小

最新推荐文章于 2024-07-30 16:35:47 发布

xiaoping8411

最新推荐文章于 2024-07-30 16:35:47 发布

阅读量5.2k

点赞数

分类专栏： html js 文章标签： iframe function border 框架 null table

html 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

<html>
<head>
  <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
  <title>拖拽改变iframe大小</title>
  <script type="text/javascript">
   var isIe = true;
   if(!document.all)
   {
       isIe = false;
   }
   function downToResize(obj,e){
       obj.style.cursor='col-resize';
       var e = isIe ?window.event : e;
       //记录开始准备移动的起始位置
       obj.mouseDownX=e.clientX;
       //父级左边框架的宽度
       obj.parentLeftFW = document.getElementById('left_td').width;
       //父级右边框架的宽度
       obj.parentRightFW =document.getElementById('divRightFrame').parentNode.clientWidth;
       obj.parentBox = document.getElementById('box');
       if(isIe){
       obj.setCapture();
       }else{
           alert('不支持火狐..');
           obj.mouseDownX = 0;
       }
   }
   function moveToResize(obj,e){
       var e = isIe ?window.event : e;
       if(!obj.mouseDownX) return false;
       obj.removed = 1;
       obj.parentBox.style.display = 'inline';
       obj.parentBox.style.width = obj.offsetWidth;
       obj.parentBox.style.height = obj.offsetHeight;
       obj.parentBox.style.left = e.clientX;
       obj.parentBox.style.top = getPosTop(obj.parentBox);
   }
   function getPosLeft(elm) {
           var left = elm.offsetLeft;
           while((elm = elm.offsetParent) != null)        {
                   left += elm.offsetLeft;
           }
           return left;
   }
   function getPosTop(elm) {
           var top = elm.offsetTop;
           while((elm = elm.offsetParent) != null)        {
           top += elm.offsetTop;
           }
           return top;
   }
   function upToResize(obj,e){
       var e = isIe ?window.event : e;
       //实际的移动边框的大小
       var changeW = e.clientX*1-obj.mouseDownX;
       if(changeW!=0&&obj.removed){
           var newLeftW=obj.parentLeftFW*1+changeW;
           var newRightW=obj.parentRightFW*1-changeW;
           if(newLeftW<=50) {    //如果左边宽度小于150时，左边宽度就是150
               newLeftW = 150;
           }
           if(newRightW<=200) {    //如果右边宽度小于50时，左边宽度就是150
               newLeftW = 150;
           }
           var leftObj = document.getElementById('left_td').parentNode;
           leftObj.width = newLeftW;
           leftObj.firstChild.style.width = newLeftW+'px';
       }
       if(isIe){
       obj.releaseCapture();
       }else{

       }
       obj.mouseDownX=0;
       obj.removed = 0;
       obj.style.cursor = 'default';
       obj.parentBox.style.display = 'none';
   }
  </script>
</head>
<body>
  <div id='box' style="display:'none';position:'absolute';border:'1px dotted blue';z-index:5;width:20px;height:100px;"></div>
  <table width="100%" height="100%" border="0" align="left" class="tabbg" cellPadding="0"
   cellSpacing="0">
   <tr>
    <td width="150" id="left_td">
     <iframe src="test.htm"
      name="leftframe" frameBorder="0" scrolling="auto" marginwidth="0"
      marginheight="0" id="leftframe" width="100%" height="100%" border="0">
     </iframe>
    </td>
    <td width="8">
     <TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0>
      <TBODY>
       <TR>
        <TD id=a1 bgcolor="blue"
                 οnmοusedοwn= "downToResize(this,event);"
                 οnmοuseοver="this.style.cursor='col-resize';"
                 οnmοusemοve="moveToResize(this,event);"
                 οnmοuseοut="this.style.cursor='default';"
                 οnmοuseup="upToResize(this,event);"
                >
        </TD>
              </TR>
          </TBODY>
     </TABLE>
    </td>
    <td id="right_td">
     <iframe src='test.htm' width='100%' height='100%' frameBorder='0' scrolling='auto' marginwidth='0' marginheight='0' name='divRightFrame' id='divRightFrame'></iframe>
    </td>
   </tr>
  </table>
</body>
</html>