window.open是JS中比如常用的方法。在此提供一个在线代码生成器欢迎大家使用.
网址,在线测试地址:tool.cckan.net/index.html
效果如下:
html代码与JS代码如下所示
View Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>window.open代码生成器|window.open在线代码生成器|window.open参数生成器|open代码生成器|window.open - C#传传看</title> <link rel="stylesheet" type="text/css" href="tool_open_files/toolsite.css"> <script type="text/javascript"> var temp; function S_Code() { var address = document.form1.url.value; var op_tool = (document.form1.tool.checked == true) ? "toolbar=1," : ""; var op_loc = (document.form1.loc.checked == true) ? "location=1," : ""; var op_link = (document.form1.link.checked == true) ? "directories==1," : ""; var op_stat = (document.form1.stat.checked == true) ? "status=1," : ""; var op_menu = (document.form1.menu.checked == true) ? "menubar=1," : ""; var op_scroll = (document.form1.scroll.checked == true) ? "scrollbars=1," : ""; var op_resize = (document.form1.resize.checked == true) ? "resizable=1," : ""; var op_selfopen = (document.form1.selfopen.checked == true) ? "_self" : "newwindow"; var op_width = (document.form1.width.value != "") ? "width=" + document.form1.width.value + "," : ""; var op_heigh = (document.form1.heigh.value != "") ? "heigh=" + document.form1.heigh.value + "," : ""; var op_L = (document.form1.L.value) ? "left=" + document.form1.L.value + "," : ""; var op_T = (document.form1.T.value) ? "top=" + document.form1.T.value + "," : ""; if (op_tool == "" && op_loc == "" && op_link == "" && op_stat == "" && op_menu == "" && op_scroll == "" && op_resize == "" && op_width == "" && op_heigh == "" && op_L == "" && op_T == "") { tempopenstyle = ""; } else { tempopenstyle = ",'" + op_width + op_heigh + op_L + op_T + op_tool + op_loc + op_link + op_stat + op_menu + op_scroll + op_resize; tempopenstyle = tempopenstyle.substring(0, tempopenstyle.length - 1); tempopenstyle = tempopenstyle + "'"; } temp = "window.open('" + address + "','" + op_selfopen + "'" + tempopenstyle + ")" } </script> </head> <body style="text-align: left"> <div style="padding: 25px 5px 5px;" align="center"> window.open在线生成器 <table border="0" cellspacing="0" cellpadding="0" width="760" bgcolor="#cccccc" align="center"> <tbody> <tr> <td bgcolor="#ffffff" valign="middle" align="center"> <form method="post" name="form1"> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td height="280" valign="top" width="747" align="center"> <table border="0" cellspacing="1" cellpadding="0" width="100%" bgcolor="#cccccc" align="center"> <tbody> <tr bgcolor="#f0f0f0"> <td bgcolor="#ffffff" colspan="6"> <div style="margin-top: 5px;" align="left"> URL: <input class="input" name="url" value="http://" size="54" /></div> </td> </tr> <tr bgcolor="#f0f0f0"> <td bgcolor="#ffffff"> <input name="tool" value="ON" type="checkbox" />快捷键 </td> <td bgcolor="#ffffff"> <input name="loc" value="ON" type="checkbox" />地址栏 </td> <td bgcolor="#ffffff"> <input name="link" value="ON" type="checkbox" />链 接 </td> <td bgcolor="#ffffff"> <input name="stat" value="ON" type="checkbox" />状态栏 </td> <td bgcolor="#ffffff"> <input name="resize" value="ON" type="checkbox" />调大小 </td> <td bgcolor="#ffffff"> <input name="scroll" value="ON" type="checkbox" />滚动条 </td> </tr> <tr bgcolor="#f0f0f0"> <td bgcolor="#ffffff"> <input name="menu" value="ON" type="checkbox" />菜 单 </td> <td bgcolor="#ffffff"> <input name="selfopen" value="ON" type="checkbox" />在本窗口打开 </td> <td bgcolor="#ffffff" colspan="2"> 左边距: <input name="L" size="10" /> 顶部距离:<input name="T" size="10" /> </td> <td bgcolor="#ffffff" colspan="2"> 宽:<input name="width" size="10" /> 高:<input name="heigh" size="10" /> </td> </tr> <tr bgcolor="#f0f0f0"> <td bgcolor="#ffffff" valign="middle" colspan="6" align="center"> <div style="margin-top: 5px;"> <input class="but2" onclick="S_Code();eval(temp)" name="button" value="测 试" type="button" /><input class="but2" onclick="S_Code();document.form1.showcode.value=temp;" name="Button" value="生成代码" type="button" /></div> </td> </tr> </tbody> </table> <textarea id="showcode" cols="145" rows="14" name="textarea"></textarea> </td> </tr> </tbody> </table> </form> </td> </tr> </tbody> </table> </div> </body> </html>
Css样式
View Code
body { background: url("../images/bg.gif") repeat-x scroll 0 0 #F0F7FC; color: #333333; font: 13px/16px Verdana,Tahoma,Arial,Helvetica,sans-serif; margin: 0; padding: 0; text-align: left; } * html body { font-size: 12px; } td { color: #333333; line-height: 16px; } input { color: #333333; line-height: 16px; } textarea { color: #333333; line-height: 16px; } select { color: #333333; line-height: 16px; } button { color: #333333; line-height: 16px; } input { vertical-align: middle; } textarea { vertical-align: middle; } select { vertical-align: middle; } button { vertical-align: middle; } ul { margin: 0; padding: 0; } ol { margin: 0; padding: 0; } li { margin: 0; padding: 0; } dl { margin: 0; padding: 0; } dd { margin: 0; padding: 0; } p { margin: 0; padding: 0; } h1 { margin: 0; padding: 0; } h2 { margin: 0; padding: 0; } h3 { margin: 0; padding: 0; } h4 { margin: 0; padding: 0; } h5 { margin: 0; padding: 0; } h6 { margin: 0; padding: 0; } form { margin: 0; padding: 0; } fieldset { margin: 0; padding: 0; } h1 { font-size: 1em; } h2 { font-size: 1em; } h3 { font-size: 1em; } h4 { font-size: 1em; } h5 { font-size: 1em; } h6 { font-size: 1em; } ul { list-style: none outside none; } ol { list-style: none outside none; } img { border: 0 none currentcolor; vertical-align: middle; } a { color: #0D8C21; text-decoration: none; } a:hover { color: red; text-decoration: underline; } select { font-size: 15px; } .blue { color: #3333FF; } .box h1 { background: url("../images/h1-bg.gif") repeat-x scroll 0 0 transparent; border-color: #C5E2F2 #C5E2F2 currentcolor; border-style: solid solid none; border-width: 1px 1px 0; color: #0066CC; font-size: 14px; font-weight: normal; height: 37px; line-height: 37px; padding-left: 20px; } .box h1 span { background: url("../images/h1.gif") no-repeat scroll right center transparent; float: right; font-weight: normal; padding: 10px 12px 0 0; } .box h1 a { color: #3333FF; } .box .titright { float: right; padding-right: 10px; } .box .titleft { float: left; } .clear { clear: both; font-size: 0; height: 10px; line-height: 0; } .input { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #94C6E1; color: #22AC38; font-weight: bold; margin-bottom: 5px; padding: 5px; } .input { font-size: 13px; } .but { background: url("../images/but.gif") repeat-x scroll 50% top #CDE4F2; border: 1px solid #C5E2F2; cursor: pointer; height: 30px; margin-bottom: 5px; margin-left: 5px; width: 90px; } .but2 { background: url("../images/but.gif") repeat-x scroll 50% top #CDE4F2; border: 1px solid #C5E2F2; cursor: pointer; height: 30px; margin-bottom: 5px; margin-left: 5px; width: 90px; } .but3 { background: url("../images/but.gif") repeat-x scroll 50% top #CDE4F2; border: 1px solid #C5E2F2; cursor: pointer; height: 30px; margin-bottom: 5px; margin-left: 5px; width: 50px; } .but4 { background: url("../images/but.gif") repeat-x scroll 50% top #CDE4F2; border: 1px solid #C5E2F2; cursor: pointer; height: 30px; margin-bottom: 5px; margin-left: 5px; width: 120px; } .input1 { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #7F9DB9; color: #333333; font-weight: bold; margin-bottom: 5px; padding: 3px 5px; } .but1 { background: none repeat scroll 0 0 #F0F7FD; border: 1px solid #7F9DB9; cursor: pointer; height: 23px; margin-bottom: 5px; margin-left: 5px; overflow: visible; padding: 0 15px; } .wrap { clear: both; margin: auto; width: 900px; } .top-nav { color: #DDDDDD; height: 30px; line-height: 30px; margin: auto; } * html .topnav { position: relative; z-index: 1; } .top-menu { color: #DDDDDD; float: left; height: 30px; line-height: 30px; margin: auto; padding-right: 18px; } .top-menu a { color: #555555; } .top-menu a:hover { color: #22AC38; } .top-nav-logo { color: black; float: right; height: 30px; line-height: 30px; margin: auto; } .top-nav-logo a { color: #3333FF; } .top-nav-logo a:hover { color: red; } .logolink { cursor: pointer; height: 68px; left: 3px; position: relative; top: 3px; width: 220px; } .top { background: url("../images/logo.gif") no-repeat scroll left center transparent; height: 73px; position: relative; } .topbanner { float: left; left: 230px; position: absolute; top: 8px; } .banneright { float: right; position: absolute; right: 0; top: 8px; width: 202px; } .banneright ul { background-color: #F0F7FD; border: 1px solid #B2B2B2; height: 55px; margin-left: 5px; padding: 3px 3px 0 4px; } .banneright a { color: black; font-size: 12px; } .banneright ul li { height: 19px; list-style: none outside none; } .top-menu { margin-top: 3px; } #chinaz_topbar { margin-top: 3px; } .menu { background: url("../images/menu-bg.gif") repeat-x scroll left center transparent; height: 45px; line-height: 42px; margin: auto auto 1px; padding-left: 40px; text-align: center; } .menu a { color: #FFFFFF; display: block; float: left; padding: 0 10px; } .menu a:hover { color: #F39800; } .menu .select { background: url("../images/s-menu-bg.gif") repeat-x scroll right top transparent; padding-right: 15px; } div.menu { } div.menu-list { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #D6D6D6; display: none; padding: 0 0 5px; position: absolute; width: 100px; } div.menu-list ul li { list-style-type: none; margin: 5px 2px 0; padding: 0; } div.menu-list ul li a { color: #000000; cursor: pointer; display: block; height: 25px; line-height: 25px; text-align: center; text-decoration: none; width: 100%; } div.menu-list ul li a span { display: block; height: 100%; width: 100%; } div.menu-list ul li a:hover { background: url("../images/bg-left.jpg") no-repeat scroll 0 0 #5D98D4; color: #FFFFFF; } div.menu-list ul li a:hover span { background: url("../images/bg-right.jpg") no-repeat scroll right top transparent; } .bot-nav { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #BBD7E6; clear: both; color: #DDDDDD; line-height: 32px; text-align: center; } .bot-nav a { color: #3333FF; } .foot { clear: both; color: #888888; height: 40px; padding: 10px 0; text-align: center; } .foot a { color: #3333FF; } .col { float: left; margin-right: 10px; width: 445px; } .col2 { float: left; width: 445px; } .box { clear: both; } .box1 { background: url("../images/box1-bg.gif") repeat-x scroll left top #FFFFFF; border-color: currentcolor #BBD7E6 #BBD7E6; border-style: none solid solid; border-width: 0 1px 1px; line-height: 30px; padding: 3px 15px; } .info { color: #777777; display: block; line-height: 18px; padding-top: 5px; } .info1 { color: #777777; display: block; line-height: 26px; padding: 5px 0; } .info1 .btnname { padding: 5px 0 0 6px; } .info1 .taclass { border: 1px solid #C5E2F2; height: 100px; overflow: visible; resize: none; width: 850px; } .toolist { border-bottom: 1px solid #E5EFF8; clear: both; } .toolist li { float: left; height: 22px; line-height: 22px; list-style: none outside none; padding: 3px 5px; } .toolist .imt { color: #3333FF; } .info2 { color: green; display: block; line-height: 25px; padding-right: 8px; } .info2 p { font-size: 13px; line-height: 22px; margin-bottom: 10px; text-indent: 24px; } .info3 { border-bottom: 1px solid #E5EFF8; color: #333333; display: block; font-size: 14px; line-height: 22px; margin-bottom: 5px; margin-top: 5px; padding-bottom: 5px; } .favurl { background-position: 0 1px; background-repeat: no-repeat; padding-left: 20px; } .favurl { display: inline-block; padding: 0; text-indent: 20px; } .red { color: #EA5F00; } .small { font-size: 11px; } .seo { background-color: #B2B2B2; border: 0 none currentcolor; text-align: center; width: 100%; } .seo_head { background-color: #D4E6F7; text-align: center; } .tracert_head { background-color: #D4E6F7; text-align: center; } .seo_item { background-color: #FFFFFF; text-align: center; } .infrm { margin-left: -70px !important; padding: 0; } .pr { color: #137258; font: 11px Arial,Helvetica,sans-serif; height: 14px; margin-top: 4px; } .pr span { background-image: url("../images/seos/Ranks/prbar.gif"); background-repeat: no-repeat; float: left; height: 11px; padding: 2px; width: 69px; } .pr img { margin-bottom: 6px; } .div_robot { border: 1px solid #C5E2F2; height: 350px; overflow: auto; padding-left: 10px; width: 800px; } .Ptd { color: #336699; width: 25%; } .Pspan { color: #336699; font-size: 14px; font-weight: bold; } .Ptable { background-color: #E8F3FB; text-align: left; width: 98%; } .Oimg { border: 0 none currentcolor; height: 15px; width: 15px; } .Etext { border: 1px solid #C5E2F2; height: 350px; overflow: visible; width: 800px; } .WStop { border: 1px solid #D4E9F7; margin-bottom: 10px; } .WStop1 { background-color: #ECF5FB; padding-left: 5px; } .WStop2 { color: #3333FF; font-size: 14px; font-weight: bolder; height: 30px; line-height: 30px; padding: 0 0 0 5px; text-align: center; } .WSIn { color: #333333; display: block; line-height: 22px; } .WSTitle { color: #336699; margin-left: 28px; } .WStxt { border: 1px solid #C5E2F2; height: 150px; overflow: visible; width: 800px; } .WSradio { height: 16px; width: 16px; } .WSt { margin-left: 27px; } .WSt1 { margin-left: 22px; margin-top: 2px; } .Gbtop { border: 1px solid #D4E9F7; margin-bottom: 10px; text-align: left; } .Gbtxt { border: 1px solid #C5E2F2; height: 250px; overflow: visible; width: 800px; } .GbIn1 { margin-left: 28px; margin-top: 15px; } .GbIn2 { margin-left: 22px; margin-top: 2px; } .HJtxt { border: 1px solid #C5E2F2; height: 150px; overflow: visible; width: 800px; } .utspan { background-color: #ECF5FB; border: 1px solid #D4E9F7; color: #FF3300; font-weight: bold; padding: 6px; } .utdiv { color: #006AAD; font-size: 19px; font-weight: bold; padding-bottom: 20px; padding-top: 23px; } .utddiv { color: #006AAD; font-size: 14px; font-weight: bold; padding-bottom: 20px; padding-top: 23px; } .uttd { font-size: 14px; font-weight: bold; width: 150px; } .bs { color: #EA5F00; font-size: 15px; font-weight: bold; } .bs1 { color: #EA5F00; font-size: 13px; } .f a { color: #0000CC; } .f { height: 22px; line-height: 22px; padding: 10px 10px 10px 0; text-align: left; } .f h3 { display: inline; } .f .num { color: #0069CC; font-size: 16px; width: 20px; } .f .t { font-size: 15px; } .zilan table { border-bottom: 1px solid #B2B2B2; } .zilan table tr td { line-height: 25px; } .zilan li { list-style: none outside none; } .zilan em { color: #C60A00; font-style: normal; } .zilan h3 { font: 15px Tahoma,Arial; } .zilan cite { font: 15px Tahoma,Arial; } #Show_User_Ip { background: url("../images/h1-bg.gif") repeat-x scroll 0 0 transparent; border-color: #C5E2F2 #C5E2F2 currentcolor; border-style: solid solid none; border-width: 1px 1px 0; color: #0066CC; height: 37px; line-height: 37px; overflow: hidden; padding-left: 20px; } #Show_User_Ip .sotopleft { float: left; overflow: hidden; padding-bottom: 0; padding-left: 0; padding-right: 12px; padding-top: 0 !important; } #Show_User_Ip .sotopright { float: right; font-weight: bold; padding-bottom: 0; padding-left: 0; padding-right: 12px; padding-top: 0 !important; } #ToolBox { background-color: #FFFFFF; border: 1px solid #BFC2D3; position: absolute; width: 220px; } #ToolBox ul { margin: 2px; padding: 0; text-align: left; } #ToolBox ul li { background-color: #FAFAFA; line-height: 25px; list-style-type: none; } #ToolBox ul li a { cursor: pointer; display: block; font-family: Arial; padding-left: 2px; width: 99%; } #ToolBox ul li a:hover { background-color: #E8F0FB; color: #3333FF; text-decoration: none; } .prsearchresult { background-color: #669BCC; text-align: center; } .prsearchresult td { padding: 8px; } .pr-iframe { -moz-user-select: none; display: inline-block; height: 16px; overflow: hidden; width: 1em; } .pr-iframe iframe { margin: -10px 0 0 -79px; } #chinaz_topbar { float: right; } button { overflow: visible; } .detail { overflow: hidden; padding: 10px; } .detail ul { border-left: 1px solid #B2B2B2; border-top: 1px solid #B2B2B2; height: 30px; } .detail li { border-bottom: 1px solid #B2B2B2; border-right: 1px solid #B2B2B2; float: left; list-style: none outside none; width: 100px; } .detail .head { background-color: #D4E6F7; color: green; }
好了在这里就提供 这些吧,更详细的大家可以在线测试