<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>iframe和table模拟frameset的resize功能</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<table id="main" style="width:100%; height:100%" cellSpacing="0" cellPadding="0" border="0">
<tr>
<td style="width:125px" id="tdLeft">
<iframe id="ifmLeft" style="width:125px; height:100%" src="sss.html" frameBorder="0" scrolling="auto"></iframe>
</td>
<td id="tdResizer" style="width:2px; cursor:e-resize; background-color:#A1C7F9;"> </td>
<td width="100%">
<iframe id="ifmRight" style="width:100%; height:100%" src="sss.html" frameBorder="0" scrolling="auto"></iframe>
</td>
</tr>
</table>
<script language="javaScript">
var theResizeObj = null; //代表一个 resizeObject() 的实例 This gets a value as soon as a resize start
function resizeObject()
{
this.target = null; //需要 resize 的 object
//this.dir = ""; //移动方向 type of current resize (n, s, e, w, ne, nw, se, sw)
this.mouseOld_X = null; //鼠标移动时初始 x 坐标
this.mouseOld_Y = null; //鼠标移动时初始 y 坐标
this.oldWidth = null; //需要 resize 的 object 初始 width
this.oldHeight = null; //需要 resize 的 object 初始 height
//this.oldLeft = null; //定位用的
//this.oldTop = null;
this.xMin = 1; //The smallest width possible
this.yMin = 1; //The smallest height possible
this.xMax = window.screen.availWidth * 0.95; //the max width possible
}
//准备拖动
function resizeStart()
{
if(window.event.srcElement.id == "tdResizer")
{
theResizeObj = new resizeObject();
theResizeObj.target = document.all("ifmLeft");
theResizeObj.mouseOld_X = event.clientX;
theResizeObj.oldWidth = theResizeObj.target.offsetWidth;
}
else
{
theResizeObj = null;
}
window.event.returnValue = false;
window.event.cancelBubble = true;
document.all('tdResizer').setCapture();
}
//拖动
function resize()
{
if(theResizeObj != null)
{
var newWidth = theResizeObj.oldWidth + window.event.clientX - theResizeObj.mouseOld_X;
newWidth = Math.min(newWidth, theResizeObj.xMax);
newWidth = Math.max(newWidth, theResizeObj.xMin);
theResizeObj.target.style.width = newWidth + "px";
}
window.event.returnValue = false;
window.event.cancelBubble = true;
}
//停止拖动;
function resizeStop()
{
if(theResizeObj != null)
{
theResizeObj = null;
}
//释放鼠标拖动
document.all('tdResizer').releaseCapture();
}
document.onmousedown = resizeStart;
document.onmousemove = resize;
document.onmouseup = resizeStop;
</script>
</BODY>
</HTML>
分享到：
相关推荐
2 使用Frameset+Table布局（div也可） 3 对用户ID和用户名、口令不符合条件及时判断 4 对口令不一致进行及时判断 对34的及时判断，要求提示信息必须显示在同一个页面 也就是说显示在当前的行的后面或者上面或者下面 ...
- `frame`只能在`frameset`中使用，而`iframe`可以单独使用，更灵活。 - `frame`的布局固定，不能单独调整大小，`iframe`可以。 - `frameset`适用于整个页面的框架布局，`iframe`更适合局部内容的嵌入。 - `iframe`...
里面包含了frameset，frame以及iframe的一些技术的演练，希望对大家有帮助，如果有什么补充或疑问，可以加QQ374053115进行和我讨论交流，互相进步！里面代码均手写，大致功能都已经实现，如果错误欢迎指出！
接下来，我们将详细讨论frame、iframe和frameset的区别和用法。 **Frame** Frame标签已经不再被推荐使用，因为它已从HTML5标准中废弃。在早期的HTML版本中，frame标签用于定义一个框架，让页面的一部分可以加载另...
`COLS` 和 `ROWS` 不能同时在同一个 `<FRAMESET>` 中使用，因为某些浏览器可能无法正确处理这种组合。 2. ****: `<FRAME>` 标签定义了框架的具体内容。每个 `<FRAME>` 必须包含在 `<FRAMESET>` 内，并通过 `src` ...
JS 操作 Frameset、Frame、Iframe 对象 Frameset、Frame、Iframe 是 HTML 中的框架编程概念，它们...JS 操作 Frameset、Frame、Iframe 对象可以实现框架之间的互相访问和控制，提高了 Web 应用程序的灵活性和功能性。
如果需要实现类似`frameset`的交互效果，可以结合`div`和`iframe`一起使用。 总的来说，通过熟练运用`div`和CSS，我们可以创建出与`frameset`类似甚至更灵活的布局，同时避免了`frameset`带来的问题。这要求开发者...
使用Frameset时，每个框架都视为独立的文档，因此需要在每个框架的页面加载事件中添加响应代码，如`page_onload`事件，以确保Session的一致性和可用性。 6. **了解浏览器差异：** 不同浏览器对P3P、Cookies和...
2.使用RSH框架实现Ajax系统中的客户端状态保存和模拟浏览器的后退前进功能。 在选择前端布局时，DIV布局方式是一种更加明智的选择，它可以弥补掉Frameset布局的一些局限和缺点，并且也可以使用其他手段完成Frameset...
本文将深入探讨`frameset`及其子元素`frame`、`noframes`、`iframe`的使用方法，并通过实例来解析如何设置这些元素的属性来实现复杂页面布局。 #### Frameset标签详解 `<frameset>`标签用于定义一个由多个框架组成...
页面框架内嵌示例,通过IFRAME与FRAMESET内嵌后不会出现滚动条的问题，以及top跳出框架的问题
在构建复杂的Web应用程序，尤其是后台管理系统时，框架的使用至关重要，因为它们可以帮助组织和管理页面内容，提高用户体验。"frameset"是HTML中一个非常重要的元素，它在1990年代中期被引入，用于创建多窗口或分框...
综上所述，`frameset`中的父页面与子页面（`iframe`）之间的通信是通过JavaScript的各种API和事件机制来实现的。在实际应用中，我们需要根据具体需求选择合适的方法进行交互，同时注意处理好跨域问题和安全性问题。...
通过结合使用`div`和CSS，我们可以实现与`frameset`相似甚至更复杂的布局效果，同时避免了`frameset`的一些固有问题，如不易于搜索引擎优化（SEO）和移动设备兼容性差等。 在`div+css`布局中，我们首先定义一系列的...
然而，在HTML5中，frameset已不再被推荐使用，取而代之的是`<iframe>`标签和其他更现代的布局技术。 描述中提到的"NULL 博文链接：https://performery.iteye.com/blog/2242773"表明这是一个关于frameset的博客文章...
### Asp.net中Frameset的使用小结(2) #### 1. `<IFRAME>` 标签详解 ...尽管现代Web开发更多倾向于使用 AJAX 和前端框架来实现动态效果，但对于特定场景，掌握 Frameset 的使用方法仍然是很有帮助的。
虽然单个`iframe`可以实现嵌入，但多个`iframe`组合使用时，可以创建一个框架集（frameset）。框架集允许你将浏览器窗口分割成多个独立的部分，每个部分都可以加载不同的网页。例如： ```html <frameset rows="50%,...
Asp.net 中 Frameset 的使用小结 Frameset 是一种将网页分割成多个框窗的技术，每个框窗...Frameset 是一种强大的网页布局技术，可以帮助开发者创建复杂的网页布局，但是需要注意 Frameset 的使用限制和注意事项。
下面我们将详细探讨`frameset`的使用方法及其相关属性。 1. **frameset元素** `frameset`元素是包含`frame`元素的容器，它定义了页面的布局。例如： ```html <frameset rows="10%,*" frameborder="0" ...
在这个场景中，“实现div 遮罩 frameset”意味着在`frameset`布局的网页上，使用`div`来实现一个可移动的遮罩层或弹出窗口。 首先，我们来看`frameset`。`frameset`是HTML4中的元素，它允许我们将浏览器窗口划分为...