首頁 > 其他

拖拽改變iframe大小

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<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('不支援Firefox..');   
           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"
                 onmousedown= "downToResize(this,event);"  
                 onmouseover="this.style.cursor='col-resize';"  
                 onmousemove="moveToResize(this,event);"  
                 onmouseout="this.style.cursor='default';"  
                 onmouseup="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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More