网页弹出新窗口(没有菜单栏、工具栏、地址栏、状态栏、滚动条)

yoken 阅读:1468 2007-11-01 10:40:00 评论:1
好看的自定义窗口
<html>

<head>
<script language=javascript>

minimizebar="minimize.gif"; //窗口右上角最小化“按钮”的图片
minimizebar2="minimize2.gif"; //鼠标悬停时最小化“按钮”的图片
closebar="close.gif"; //窗口右上角关闭“按钮”的图片
closebar2="close2.gif"; //鼠标悬停时关闭“按钮”的图片
icon="icon.gif"; //窗口左上角的小图标

function noBorderWin(fileName,w,h,titleBg,moveBg,titleColor,titleWord,scr) //定义一个弹出无边窗口的函数,能数意义见下面“参数说明”,实际使用见最后的实例。
/*
------------------参数说明-------------------
fileName :无边窗口中显示的文件。
w     :窗口的宽度。
h     :窗口的高度。
titleBg :窗口“标题栏”的背景色以及窗口边框颜色。
moveBg :窗口拖动时“标题栏”的背景色以及窗口边框颜色。
titleColor :窗口“标题栏”文字的颜色。
titleWord :窗口“标题栏”的文字。
scr :是否出现滚动条。取值yes/no或者1/0。
--------------------------------------------
*/
{
var contents="<html>"+
"<head>"+
"<title>"+titleWord+"</title>"+
"<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\">"+
"<object id=hhctrl type='application/x-oleobject' classid='clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11'><param name='Command' value='minimize'></object>"+
"</head>"+
"<body topmargin=0 leftmargin=0 scroll=no onselectstart='return false' ondragstart='return false'>"+
" <table height=100% width=100% cellpadding=0 cellspacing=1 bgcolor="+titleBg+" id=mainTab>"+
" <tr height=18 style=cursor:default; onmousedown='x=event.x;y=event.y;setCapture();mainTab.bgColor=\""+moveBg+"\";' onmouseup='releaseCapture();mainTab.bgColor=\""+titleBg+"\";' onmousemove='if(event.button==1)self.moveTo(screenLeft+event.x-x,screenTop+event.y-y);'>"+
" <td width=18 align=center><img height=12 width=12 border=0 src="+icon+"></td>"+
" <td width="+w+"><span style=font-size:12px;color:"+titleColor+";font-family:宋体;position:relative;top:1px;>"+titleWord+"</span></td>"+
" <td width=14><img border=0 width=12 height=12 alt=最小化 src="+minimizebar+" onmousedown=hhctrl.Click(); onmouseover=this.src='"+minimizebar2+"' onmouseout=this.src='"+minimizebar+"'></td>"+
" <td width=13><img border=0 width=12 height=12 alt=关闭 src="+closebar+" onmousedown=self.close(); onmouseover=this.src='"+closebar2+"' onmouseout=this.src='"+closebar+"'></td>"+
" </tr>"+
" <tr height=*>"+
" <td colspan=4>"+
" <iframe name=nbw_v6_iframe src="+fileName+" scrolling="+scr+" width=100% height=100% frameborder=0></iframe>"+
" </td>"+
" </tr>"+
" </table>"+
"</body>"+
"</html>";

pop=window.open("","_blank","fullscreen=yes");
pop.resizeTo(w,h);
pop.moveTo((screen.width-w)/2,(screen.height-h)/2);
pop.document.writeln(contents);

if(pop.document.body.clientWidth!=w||pop.document.body.clientHeight!=h) //如果无边窗口不是出现在纯粹的IE窗口中
{
temp=window.open("","nbw_v6");
temp.close();
window.showModalDialog("about:<"+"script language=javascript>window.open('','nbw_v6','fullscreen=yes');window.close();"+"</"+"script>","","dialogWidth:0px;dialogHeight:0px");
pop2=window.open("","nbw_v6");
pop2.resizeTo(w,h);
pop2.moveTo((screen.width-w)/2,(screen.height-h)/2);
pop2.document.writeln(contents);
pop.close();
}
}
</script>
</head>

<body>

<!----------------- 实例一(按钮),修改参数可改变窗口样式 ----------------->
<button onclick=noBorderWin('test.html','400','240','#000000','#333333','#CCCCCC','一个无边窗口的测试例子','yes');>open</button>

<br><br>

<!----------------- 实例二(链接),修改参数可改变窗口样式 ----------------->
<a href=#none onclick=noBorderWin('test.html','400','240','#000000','#333333','#CCCCCC','一个无边窗口的测试例子','yes');>open</a>

<br><br>

<!----------------- 实例三(图片),修改参数可改变窗口样式 ----------------->
<img src=none height=30 width=60 alt=open style="cursor:hand" onclick=noBorderWin('test.html','400','240','#000000','#333333','#CCCCCC','一个无边窗口的测试例子','no');>无滚动条的

</body>

</html>




test.htm
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>only test</title>
<style type=text/css>
.font1 { color:red; }
body,td,p { font-size:12px; }
</style>
</head>

<body bgcolor=#EEEEEE>
<script language=javascript>
document.writeln("JavaScript支持,测试通过。");
</script>
<p class=font1>如果您看到字是红色,则内部CSS支持的测试通过。</p>
<iframe height=60 src=about:iframe支持测试通过!></iframe>
<br><br>如果您在上面看不到有内嵌的页子出现,那么iframe支持测试失败。
<br>另外请点击右上角的<b>最小化、关闭</b>按钮,看是否有效。
</body>

转载保留链接!网址:http://80920140.com/post/144.html

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源; 2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任; 3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

扫一扫关注我们,了解最新精彩内容