javascript入门笔记(四)

wanyin940

浏览: 28278 次
性别:
来自: 武汉

最近访客更多访客>>

sunblessed

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript HTML Web

第五课：打开和操纵窗口http://www.networkforgood.org 页头help的链接

（一）打开新窗口

window.open() 方法中三个参数用于控制新窗口的特征

1. URL参数

2. HTML名称参数，只有当你希望用户在一个不同的页面上单击HTML链接时，把页面载入到该窗口是有用。

3.特性参数

onClick="var openWindow = window.open('http://www.bookofjavascript','javascript','resizable');"

onClick="var picture = window.open ('http://www.bookofjavascript','javascript','width=605,height=350');"

javascript窗口特性:

height=x 把新窗口的高度调整为x

left=x 新窗口左边放到距离屏幕左边X像素的位置

location 添加地址栏

menubar 添加菜单栏

resizable 是否可以缩放窗口

scrollbars 如果内容超出了窗口大小，自动为窗口添加滚动条

status 窗口底部添加状态栏

toolbar 添加标准工具栏

top=x 把新窗口的定编放到距离屏幕定编X像素的位置

width=x 把新窗口的宽度调整为x像素

（二）关闭窗口

1.用链接关闭窗口： <a href="#" onClick="window.close();return false;">Close Window</a>

2.用按钮关闭窗口： <form><input type="button" value="Close window" onClick="window.close();"></form>

(三)显示和隐藏窗口

1. focus()方法用于将窗口提到前面

<a href="#" onClick=

"navigation=window.open('http://www.baidu.com','navigation','width=605,height=350');navigation.focus();return false;">Navigation</a>

2. blur()方法用于将窗口放到后面

（四）窗口状态栏的属性

1.修改窗口状态栏的属性：<body onLoad="window.status='Hi there!';">

2.将光标移到某个连接上修改状态栏的显示<a href=http://www.baidu.com"

onMouseOver="window.status='This is Baidu Page';

return true;''>Baidu</a>

此连接中return true会阻止URL出现在状态栏中。

（五）opener属性

在已打开的页面中输入以下代码可以改变父窗口的状态栏。

<a href="#" onClick="window.opener.status='howdy';return false;">put howdy into the status bar of the original window</a>

如果想通过子窗口来控制父窗口的显示内容：

父窗口代码：

<html>
<head>
<title>The Controlled Window</title>

</head>
<body>
Use the remote control to send various web pages to this window.
</body>
</html>

子窗口代码：the_remote.html

<html><head><title>Remote Control</title>
</head>
<body>
<a href="#" onClick="window.opener.location='http://www.nytimes.com/'; window.focus();">NY Times</a><br>
<a href="#" onClick="window.opener.location='http://www.webmonkey.com/'; window.focus();">Webmonkey</a><br>
<a href="#" onClick="window.opener.location='http://www.salon.com/'; window.focus();">Salon</a><br>
</body>
</html>

小例子：在主页上通过链接改变小窗口得图像：

index.html:

<html>
<head>
<title>5</title>
<script type=text/javascript>
var pic=window.open("a.html","pic","width=400,height=400");
</script>
</head>
<body>
<a href="#" onclick="pic.document.the_image.src='wanyin940.jpg';window.focus();" >wanyin940</a><br>
<a href="#" onclick="pic.document.the_image.src='eat.jpg';window.focur();">026</a>
</body>
</html>

小窗口：a.html

<html>

</html>

分享到：

javascript入门笔记(五) | javascript入门笔记(三)

2009-04-08 14:15
浏览 801
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论