星期零

技术改变生活,分享让我们快乐!
随笔 - 159, 文章 - 0, 评论 - 234, 阅读 - 44万
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

根据内容自动调整弹出窗口大小的JS解决方案

Posted on   weekzero  阅读(4240)  评论(4编辑  收藏  举报
问题
        在弹出窗口时,根据窗口的内容来自动调节窗口的大小,窗口如果已经和屏幕相等大小时则出现滚动条。
解决方案
        在弹出的页面中添加一JS脚本方法win_onLoad(),在body的onload方法中引用win_onLoad(),在body中添加表,表的id取名为tbllist,窗口的大小就是这个table的大小在宽和高上分别加50。
        窗口弹出时,父窗口设定的大小如果小于500的则弹出的窗口为500,大于的则是原来大小,弹出窗口的内容如果大于本来的大小则自适应窗口的大小。

部分代码如下:

        父窗口a.html页面代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script language="javascript">
function js()
{
    window.open(
"b.html","b","width=100,height=100,top=100,left=100,scrollbars=yes,resizable=no,menubar=no,status=no");
}

</script>
</head>

<body>
<input type="submit" name="Submit" value="提交" onclick="js();" />
</body>
</html>
        
        子页面b.html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script language=javascript>
//
function win_onLoad(){
    
var width = document.all["tblList"].offsetWidth;    
    
var height = document.all["tblList"].offsetHeight; 
    
    width 
= eval(width + 50);
    height 
= eval(height + 50);
    
    
if (width < 500)
        width 
= 500;
    
else if (width > screen.width)
        width 
= screen.width;
    
    
if (height < 500)
        height 
= 500;
    
else if (height > screen.height)
        height 
= screen.height;
    
    window.resizeTo(width,height);
}

</script>

<head></head>
<BODY bgcolor="0099CC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="win_onLoad();">
<TABLE width="95%" border="0" cellpadding="0" cellspacing="0" class="table-left1-right2"  style="border:1 solid #000000" id="tblList">
<TR>
<TD width="100%" valign="top" colspan=2>
 欢迎使用!
</TD>
</TR>
</TABLE>
</BODY>
</html>

编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示