用js怎么控制一个窗口

2023-05-01 14:01:01JavaScript036

用js怎么控制一个窗口,第1张

首先你这些DIV 是固定死的么？

把下面的复制，运行下子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>div分页显示_脚本之家_www.jb51.net</title>

#frameContent{

width:500px /*调整显示区的宽*/

height:200px/*调整显示区的高*/

font-size:14px

line-height:20px

border:1px solid #000000

overflow-pageINdex:hidden

overflow-y:hidden

word-break:break-all

}

font-size:12px

color:#000000

text-decoration:underline

}

a:hover{

font-size:12px

color:#CC0000

text-decoration:underline

}

</style>

</head>

<body>

<p>北京奥运会颁奖礼仪服装共十六款。其中男装一款作为升旗手制服。女装十五款分为五个系列，每一系列分别按照嘉宾引导员、运动员引导员和托盘员的不同职能设计了三个不同款式。在奥运会的302场和残奥会的472场颁奖仪式上，这五个系列的礼服将分别出现在不同的场馆及比赛中。</p>

<p>"青花瓷"系列使用在国家游泳中心水立方、顺义水上公园和青岛等所有水上项目的颁奖仪式中。 </p>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

设计灵感取自世界闻名的中国青花瓷器。中国传统乱针绣的运用形象逼真地再现了青花瓷的晕染效果。鱼尾裙的廓形设计凸显了中国女性的柔美曲线。

</p>

<p>宝蓝系列使用在体操、室内球类比赛和击剑等项目的颁奖现场。服装采用温润典雅的宝蓝色作为礼服主色，腰间饰有采用传统盘金绣制作的腰封，图案选用最具中国传统文化审美意趣和美好愿望的吉祥纹样——江山海牙纹、牡丹花纹，凸显了鲜明的中国特色和民族风格。同时也向全世界人民展示了中国最高超的刺绣工艺。中式的立领配以西式的肩部设计尽现中国女性落落大方的高贵气质。</p>

<p>国槐绿系列丝缎礼服使用在自行车、射击、现代五项等项目的颁奖仪式上。礼服寓意蓬勃朝气的生命和郁郁葱葱的环境，体现了与自然和谐发展的美好愿望及坚守"绿色奥运"的决心。立体银线绣制的吉祥牡丹和契合女性柔美曲线的卷曲花纹，更显身段的婀娜多姿和东方女性的恬静气质。</p>

<p>"玉脂白"系列将出现在国家体育场、所有的室外球类比赛以及香港马术比赛中。它巧妙地呼应了奥运奖牌金镶玉的理念，彩绣腰封和玉佩的设计，既是中国玉文化的完美再现又是对传统旗袍设计的一次创新。层次丰富的绿色与牙白色丝绸面料的质感完美搭配，更突出了中国女性内敛、含蓄的特质。</p>

<p>粉红色系列主要出现在拳击、举重、摔跤等力量型比赛中，以传统盘金绣工艺制作的宝相花图案腰饰，分割出完美的人体比例。领部的设计突出了颈部的优美线条，同时以粉色的柔美来中和比赛的阳刚之气。</p>

<p>升旗手服装与青花瓷礼服遥相呼应，在体现中国传统文化的同时又不失阳刚之气，将出现在所有的奥运会和残奥会比赛场馆中。</p>

<p>所有的奥运礼服和升旗手制服都绣有"Beijing 2008"的字样。</p>

<p>"十分具有中国文化特色"是国际奥委会对这些服装的第一评价。2007年5月23日，由北京奥组委主办、中国服装设计师协会和北京市工业促进局协办的北京奥运会颁奖礼仪服装设计征集活动启动后，共收到有效作品305份，包括服装成衣137套、效果图168份。投稿作品中包括全国"十佳"设计师投稿127份，服装设计专业院校投稿80份。</p>

<p>2007年8月2日—3日，经过初评和复评。由北京奥组委领导、中国艺术及服装设计界专家、国际奥委会形象景观专家及冠军运动员代表组成的评审小组共选出成衣作品30件，包括托盘员礼服8件、嘉宾引导员礼服7件、运动员引导员礼服10件、升旗手制服5件。2007年8月至2008年2月，北京奥组委组织专家召开了十余次方案修改研讨会。入围设计师在专家组的指导下多次修改方案、制作样衣。并先后于2007年11月8日和08年2月3日两次上报北京奥组委执委会审议。最终方案于2008年2月底通过国际奥委会审批。（张宇）</p>

</div>

<P>

var obj = document.getElementById("frameContent") //获取内容层

var pages = document.getElementById("pages")//获取翻页层

var pgindex=1 //当前页

window.onload = function() //重写窗体加载的事件

{

var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight))//获取页面数量

pages.innerHTML = "<b>共"+allpages+"页</b>"//输出页面数量

for (var i=1i<=allpagesi++){

pages.innerHTML += "<a href=\"javascript:showPage('"+i+"')\">第"+i+"页</a>"

//循环输出第几页

}

pages.innerHTML += " <a href=\"javascript:gotopage('-1')\">上一页</a> <a href=\"javascript:gotopage('1')\">下一页</a>"

}

function gotopage(value){

try{

value=="-1"?showPage(pgindex-1):showPage(pgindex+1)

}catch(e){

}

function showPage(pageINdex)

{

obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight) //根据高度，输出指定的页

pgindex=pageINdex

}

</script>

</body>

</html>

请采用网页对话框的方式 showModalDialog

showModalDialog是jswindow对象的一个方法，和window.open一样都是打开一个新的页面。

区别是：showModalDialog打开子窗口后，父窗口就不能获取焦点了（也就是无法操作了）。

可以在子窗口中通过设置window.returnValue的值，让父窗口可以获取这个returnvalue.

2.一个例子

1)主窗口main.html,

2)在主窗口中通过showModalDialog的方式打开子窗口sub.html

3)在子窗口中设置returnValue返回给主窗口使用

main.html

复制代码代码如下:

<HTML>

<HEAD>

<METANAME="GENERATOR"Content="oscar999">

</HEAD>

functionshowmodal()

{

varret=window.showModalDialog("sub.html?temp="+Math.random())

alert("subreturnvalueis"+ret)

}

</script>

<BODY>

<INPUTid=button1type=buttonvalue="opensub"name=button1onclick="showmodal()">

</BODY>

</HTML>

sub.html

<HTML>

<HEAD>

<METANAME="GENERATOR"Content="oscar999">

</HEAD>

functionreturnMain()

{

window.returnValue="returnfromsub"

window.close()

}

</script>

<BODY>

<INPUTid=button1type=buttonvalue="returnandclose"name=button1onclick="returnMain()">

</BODY>

</HTML>

这种目前只有IE可用，其它浏览器都不可用了

方式二:

采用其它js框架，弹出对话框的模式

1、window.open(pageURL,name,parameters)

pageURL 为弹出窗口路径

name 为弹出窗口名称，也可以是系统自带的比如：_self, _blank,_top,_parent ...

parameters 为窗口参数(各参数用逗号分隔)

各项参数

其中yes/no也可使用1/0，pixel value为具体的数值，单位象素。

参数取值范围说明

alwaysLowered yes/no 指定窗口隐藏在所有窗口之后

alwaysRaised yes/no 指定窗口悬浮在所有窗口之上

depended yes/no 是否和父窗口同时关闭

directories yes/no Nav2和3的目录栏是否可见

height pixel value 窗口高度

hotkeys yes/no 在没菜单栏的窗口中设安全退出热键

innerHeight pixel value 窗口中文档的像素高度

innerWidth pixel value 窗口中文档的像素宽度

location yes/no 位置栏是否可见

menubar yes/no 菜单栏是否可见

outerHeight pixel value 设定窗口(包括装饰边框)的像素高度

outerWidth pixel value 设定窗口(包括装饰边框)的像素宽度

resizable yes/no 窗口大小是否可调整

screenX pixel value 窗口距屏幕左边界的像素长度

screenY pixel value 窗口距屏幕上边界的像素长度

scrollbars yes/no 窗口是否可有滚动栏

titlebar yes/no 窗口题目栏是否可见

toolbar yes/no 窗口工具栏是否可见

Width pixel value 窗口的像素宽度

z-look yes/no 窗口被激活后是否浮在其它窗口之上

常用示例：

window.open ('page.html', 'newwindow', 'fullscreen') //全屏

window.open ('page.html', '_self', 'fullscreen = yes , height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no')// 在当前页面弹出一个全屏的窗口，并有详细的设置

popWin = window.open('test.jsp')// 获取弹出窗口对象，以便进行操作

popWin .focus()// 聚焦窗口2、window.alert()参数，只有一个，显示警告框的信息；无返回值。

3、window.confirm() 参数就只有一个。显示提示框的信息。按确定,返回true；按取消返回false。

4、window.prompt()参数,有两个，第一个参数，显示提示输入框的信息。第二个参数,用于显示输入框的默认值。返回，用户输入的值。

5、window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

showModalDialog()与showModelessDialog()的区别，在于showModalDialog()打开的窗口，置在父窗口上，必须关闭才能访问父窗口；showModelessDialog()，打开后不必关闭也可访问父窗口打开的窗口。使用方法：

vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])

vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

参数说明：

sURL--

必选参数，类型：字符串。用来指定对话框要显示的文档的URL。

vArguments--