iframe 如何用鼠标拖动来改变框的大小?

iframe可以用js动态设置width和height来设定大小

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

iframe不能改变大小的，你用框架吧。框架可以调整的
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style>
<script type="text/jscript" language="javascript">
function change(){
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
document.getElementById("ff").width = x + "px";
document.getElementById("ff").height = y + "px";
}
</script>
</head><body onUnload="">
<iframe id="ff" width="100" height="100"></iframe><br>
x:<input type="text" value="" id="x"><br>
y:<input type="text" value="" id="y"><br>
<input type="button" value="改变" onClick="change()">
</body>
</html>
google了两天，问题解决了，代码如下：<%@ page contentType="text/html; charset=gb2312" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>menu</title>
<style type="text/css">
.left_iframe {
width: 180px;
height: 92%;
visibility: inherit;
background: transparent;
}
.main_iframe {
z-index: 1;
width: 100%;
height: 100%;
visibility: inherit;
}
</style>

<script type="text/javascript">
var _winWidth = 180;
var _winHeight = 575;
/*******************************/
/***** Colmid (CM) Object *****/
/*******************************/
function CM() {}
CM.mouseover = function(p_o){p_o.style.backgroundColor = "#549FE3";}
CM.mouseout = function(p_o){p_o.style.backgroundColor = "#FFFFFF";}
CM.mousedown = function(p_ev){
p_ev = (p_ev) ? p_ev : event;
CM.ismousedown = true;
CM.currpos = p_ev.clientX;
CM.currLeftW = CM.getCurrLeftW();
document.body.style.cursor = 'e-resize';
return false;
}
CM.mouseup = function(){
CM.ismousedown = false;
document.body.style.cursor = 'auto';
CM.currLeftW = parseInt(document.getElementById("colleft").style.width);
return false;
}
CM.mousemove = function(p_ev){
if (CM.ismousedown){
p_ev = (p_ev) ? p_ev : event;
var newpos = p_ev.clientX;
var pxmoved = parseInt(newpos - CM.currpos);
pxmoved = (document.body.dir == 'rtl') ?  -pxmoved : pxmoved;
var newLeftW = parseInt(CM.currLeftW + pxmoved);
var newRightW = getWinWidth() - newLeftW - CM.rightWAdj;
if (newLeftW >= CM.minLeft && newRightW >= CM.minRight){
document.getElementById("colleft").style.width = newLeftW + 'px';
}
return false
}else return true;
}
CM.setMinLeft = function(){
CM.minLeft = 1;    //控制左边窗口的最小值
}
CM.getCurrRightW = function(){
return getWinWidth() - CM.getCurrLeftW() - CM.rightWAdj;
}
CM.getCurrLeftW = function(){
if (CM.currLeftW == 0) CM.currLeftW = parseInt(document.getElementById("colleft").style.width);
return CM.currLeftW;
}
CM.ismousedown;
CM.currpos;
CM.currLeftW = 0;
CM.minLeft;
CM.minRight = 30;//控制右边窗口的最小值
CM.rightWAdj = 21;//8+8+5
/***** End Colmid (CM) Object *****/function getElemHeight(p_el){
if (p_el.innerHeight) return p_el.innerHeight;
else if (p_el.clientHeight) return p_el.clientHeight;
else return p_el.offsetHeight;
}
function getWinHeight(){
if (window.innerHeight) return window.innerHeight;
else if (document.documentElement.clientHeight) return document.documentElement.clientHeight;
else if (document.body.offsetHeight) return document.body.offsetHeight;
else return _winHeight;
}
function getWinWidth(){
if (window.innerWidth) return window.innerWidth;
else if (document.documentElement.clientWidth) return document.documentElement.clientWidth;
else if (document.body.offsetWidth) return document.body.offsetWidth;
else return _winWidth;
}
function HandleOnLoad(){
CM.setMinLeft();
}
/***** Attach events *****/
window.onload = HandleOnLoad;
</script>
</head>

<body dir="ltr" onmouseup="return CM.mouseup();" onmousemove="return CM.mousemove(event);">
<link href="demo/styles/works.css" rel="stylesheet" type="text/css" />
<link href="demo/styles/_MenuTree.css" rel="stylesheet" type="text/css" />

<div style="float:top;width:100%;height:55px;" >
<iframe style="width:100%;height:55px; border-top: " name="Screen1" src="/fixedassets/jsMenu/sc1/sc1.jsp" scrolling="no"
Frameborder="1" marginheight=0></iframe>
</div>


<table style="width: 100%; height: 100%;">
  <tr>
    
    <td style="width: 200px; height: 27px" id="colleft"><iframe frameborder="0" id="I1" name="I1" src="/fixedassets/jsMenu/submenu.html" class="main_iframe" allowtransparency="true"> </iframe></td>
    
    <td width="5" rowspan="2" id="colmid" onmouseover="CM.mouseover(this)" onmouseout="CM.mouseout(this)" onmousedown="return CM.mousedown(event)" onmouseup="return CM.mouseup();"><img src="/fixedassets/icons/n5.gif" width="5" height="100%" border="0" alt=""/> </td>
     
    <td style="height: 27px" id="colright"><iframe frameborder="0" id="I2" name="I2" scrolling="yes" src="/fixedassets/page/jdtc.jsp" class="main_iframe"> </iframe></td>
  </tr>
</table>
<center><a href="#" class="itemAnchor" onclick="" >TOP</a> </center>
</body>
</html>
不过我是新手，上述只能实现左右的拉动，上下的拉动还不会，希望各位大侠们指点！
上述代码补充修改一下:<%@ page contentType="text/html; charset=gb2312" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>menu</title>
<style type="text/css">
.left_iframe {
width: 180px;
height: 92%;
visibility: inherit;
background: transparent;
}
.main_iframe {
z-index: 1;
width: 100%;
height: 100%;
visibility: inherit;
}
</style>

<script type="text/javascript">
var _winWidth = 180;
var _winHeight = 575;
/*******************************/
/***** Colmid (CM) Object *****/
/*******************************/
function CM() {}
CM.mouseover = function(p_o){p_o.style.backgroundColor = "#549FE3";}
CM.mouseout = function(p_o){p_o.style.backgroundColor = "#FFFFFF";}
CM.mousedown = function(p_ev){
p_ev = (p_ev) ? p_ev : event;
CM.ismousedown = true;
CM.currpos = p_ev.clientX;
CM.currLeftW = CM.getCurrLeftW();
document.body.style.cursor = 'e-resize';
return false;
}
CM.mouseup = function(){
CM.ismousedown = false;
document.body.style.cursor = 'auto';
CM.currLeftW = parseInt(document.getElementById("colleft").style.width);
return false;
}
CM.mousemove = function(p_ev){
if (CM.ismousedown){
p_ev = (p_ev) ? p_ev : event;
var newpos = p_ev.clientX;
var pxmoved = parseInt(newpos - CM.currpos);
pxmoved = (document.body.dir == 'rtl') ?  -pxmoved : pxmoved;
var newLeftW = parseInt(CM.currLeftW + pxmoved);
var newRightW = getWinWidth() - newLeftW - CM.rightWAdj;
if (newLeftW >= CM.minLeft && newRightW >= CM.minRight){
document.getElementById("colleft").style.width = newLeftW + 'px';
}
return false
}else return true;
}
CM.setMinLeft = function(){
CM.minLeft = 1;    //控制左边窗口的最小值
}
CM.getCurrRightW = function(){
return getWinWidth() - CM.getCurrLeftW() - CM.rightWAdj;
}
CM.getCurrLeftW = function(){
if (CM.currLeftW == 0) CM.currLeftW = parseInt(document.getElementById("colleft").style.width);
return CM.currLeftW;
}
CM.ismousedown;
CM.currpos;
CM.currLeftW = 0;
CM.minLeft;
CM.minRight = 30;//控制右边窗口的最小值
CM.rightWAdj = 21;//8+8+5
/***** End Colmid (CM) Object *****/function getElemHeight(p_el){
if (p_el.innerHeight) return p_el.innerHeight;
else if (p_el.clientHeight) return p_el.clientHeight;
else return p_el.offsetHeight;
}
function getWinHeight(){
if (window.innerHeight) return window.innerHeight;
else if (document.documentElement.clientHeight) return document.documentElement.clientHeight;
else if (document.body.offsetHeight) return document.body.offsetHeight;
else return _winHeight;
}
function getWinWidth(){
if (window.innerWidth) return window.innerWidth;
else if (document.documentElement.clientWidth) return document.documentElement.clientWidth;
else if (document.body.offsetWidth) return document.body.offsetWidth;
else return _winWidth;
}
function HandleOnLoad(){
CM.setMinLeft();
}
/***** Attach events *****/
window.onload = HandleOnLoad;
</script>
</head>

<body dir="ltr" onmouseup="return CM.mouseup();" onmousemove="return CM.mousemove(event);">
<link href="demo/styles/works.css" rel="stylesheet" type="text/css" />
<link href="demo/styles/_MenuTree.css" rel="stylesheet" type="text/css" />

<div style="float:top;width:100%;height:100px;" >
<iframe style="width:100%;height:100px; border-top: " name="Screen1" src="http://www.china.com" scrolling="auto"
Frameborder="1" marginheight=0></iframe>
</div>


<table style="width: 100%; height: 100%;">
  <tr>
    
    <td style="width: 200px; height: 27px" id="colleft"><iframe frameborder="0" id="I1" name="I1" src="http://www.163.com" class="main_iframe" allowtransparency="true"> </iframe></td>
    
    <td width="5" rowspan="2" id="colmid" onmouseover="CM.mouseover(this)" onmouseout="CM.mouseout(this)" onmousedown="return CM.mousedown(event)" onmouseup="return CM.mouseup();"><img src="/fixedassets/icons/n5.gif" width="5" height="100%" border="0" alt=""/> </td>
     
    <td style="height: 27px" id="colright"><iframe frameborder="0" id="I2" name="I2" scrolling="yes" src="http://sina.com.cn" class="main_iframe"> </iframe></td>
  </tr>
</table>
<center><a href="#" class="itemAnchor" onclick="" >TOP</a> </center>
</body>
</html>
http://210.76.65.152/search/searchmain.jsp 这里有个例子，其实也不是很复杂，主要就是用JS控制表格中TD的宽度，然后IFRAME就自适应了。
上面的CODE 都不能实现用鼠标拖动窗口放大缩小的功能，谁可以给一个正确的答案呀
这个现在来看还是不行啊，当iframe占满整个TD时，就获不到鼠标的位置了。拖动会变的缓慢还易出错