第五课:打开和操纵窗口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>
<script type = "text/javascript">
var control_window = window.open("the_remote.html","control_window","width=100,height=100");
</script>
</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>
<img src=wanyin940.jpg name=the_image>
</html>
分享到:
相关推荐
JavaScript,也被称为JS,是一种广泛应用于网页和网络应用的编程语言,主要负责实现客户端的交互性和动态效果。作为“Web的三大核心技术”之一,JavaScript与HTML(超文本标记语言)和CSS(层叠样式表)共同构建了...
这篇"JavaScript入门新手学习笔记"提供了全面的学习资源,适合初学者系统性地掌握这一技术。 笔记可能包含了以下关键知识点: 1. **基础语法**:JS的基础包括变量(var、let、const)、数据类型(如字符串、数字、...
这份"javascript入门学习笔记"旨在为初学者提供一个全面且深入的JavaScript学习路径。 一、基础语法 JavaScript的基础包括变量、数据类型、操作符、流程控制等。变量用于存储数据,数据类型分为基本类型(如字符串...
【标题】:“JavaScript入门笔记(二)” 在“JavaScript入门笔记(二)”中,我们将深入探讨JavaScript这门广泛应用于Web开发的脚本语言的核心概念,以及如何利用它来增强网页的交互性和动态性。这篇笔记可能包括了...
JavaScript入门学习笔记
在"JavaScript入门课件与笔记"中,你可以找到一系列帮助初学者掌握这门语言的资源。这些课件可能包含了从基础语法到高级特性的详细讲解,旨在帮助“小白”逐步建立起对JavaScript的理解。 1. **基础语法**:...
根据提供的文件信息,我们可以整理出一系列关于JavaScript的基础知识点,这些知识点特别适合初学者入门学习。 ### JavaScript基础概念 **JavaScript**是一种广泛使用的编程语言,它主要用于网页开发,为静态的HTML...
javascript入门笔记包括javascript简介、javascript语法、javascript流程控制、函数、数组等
一个周前自己较系统地学完 javascript,但老感觉自己对基础语法部分的掌握不够扎实,javascript 的基础语法内容实在是丰富灵活,但这部分是进大厂必不可缺的知识,于是花了不少时间耐心整理了这篇笔记,以此夯实基础...
这篇学习笔记主要涵盖了JavaScript的基础语法和客户端JavaScript的相关知识。 1. **JavaScript基本语法**: - **变量声明**:未声明的变量尝试读取时会产生错误,而写入未声明的变量会创建一个全局变量。 - **...
这份笔记涵盖了JavaScript的基础语法、核心概念以及高级特性,旨在构建一个完整的知识体系,帮助读者从入门到精通。 1. **JavaScript基础** - 变量与数据类型:JavaScript支持动态类型,包括基本类型(如数字、...
以下是对标题和描述中提到的JavaScript知识点的详细解释: ### 1. 自定义函数 JavaScript中的函数是第一类对象,可以作为变量赋值、作为参数传递或作为其他函数的返回值。自定义函数使用`function`关键字定义,参数...
这份“javascript学习笔记整理知识点整理”是针对初学者的一份宝贵资料,涵盖了JavaScript的基础知识,旨在帮助新手快速入门并掌握这门语言的核心概念。 一、变量与数据类型 在JavaScript中,变量用于存储数据。...
JAVASCRIPT从入门到精通读书笔记.pdf
JavaScript是一种广泛应用于网页和网络应用的轻量级、解释型的编程语言,主要用来增加网页的交互性和动态功能。JavaScript与Java虽然名字相似,但两者是完全不同的语言,JavaScript主要是在客户端的浏览器上运行,而...
本压缩包"JavaScript入门课堂随堂笔记.zip"包含了丰富的学习资料,旨在帮助初学者掌握这门重要的编程语言。 1. **基础语法**: JavaScript的基础包括变量声明(var、let、const)、数据类型(如字符串、数字、布尔...
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料,这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
这份笔记是对JavaScript基础知识的总结,内容丰富且覆盖了JavaScript编程的多个核心方面,适合初学者作为入门参考或对有经验的开发者作为复习材料。在实际使用JavaScript开发中,理解和掌握这些知识点是非常重要的,...