欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

javascript学习（6）:关于窗口（打开新窗口，弹出窗口）

程序员文章站 2022-03-02 12:06:54
...
开发人员可能希望在不干扰用户正在访问的页面的前提下，通过打开一个新窗口来为用户显示一
些附加的信息。例如，我们可能希望为一篇技术论文或新闻报道打开注释和评论。虽然使用HTML
可以打开新浏览器窗口，不过使用JavaScript 的话，对新窗口的内容和功能可以有更高的可控性。

[color=red]单击链接会触发创建新窗口[/color]

<!DOCTYPE html>
<html>
<head>
<title>Opening a Window</title>
</head>
<body>
<h1>The Master of the House</h1>
<h2>Click on His name to behold He Who Must Be Adored</h2>
<h2><a href="#" class="newWin">Pixel </a></h2>
<script>
window.onload = newWinLinks;
function newWinLinks() {
	alert(document.links.length);//1
for (var i=0; i<document.links.length; i++) {
if (document.links[i].className == "newWin") {
document.links[i].onclick = newWindow;
}
}
}
function newWindow() {
var catWindow = window.open("image/1.jpg", "catWin", "resizable=no,width=350,height=260");
return false;
}
</script>
</body>
</html>


可修改弹出窗口的样式-----》在窗口中添加参数，可以将其放置在open()命令中并用引号封装。在希望保留的功能名称后面加上=yes，在不想保留的功能名称后面加上=no（因为=no 通常是默认的，所以开发人员可以跳过这些功能，不予设置）。例如，如果我们想要一个特定尺寸且带有工具栏、地址栏和滚动条的窗口，将下面的代码作为open()命令的参数即可。
"toolbar=yes,location=yes,scrollbars=yes,width=300,height=300"。注意，这样创建的窗口不带有菜单栏或状态栏，大小也不可以改变。直接忽略某参数其实就相当于将其置为=no


[color=red]为窗口加载不同的内容[/color]
为窗口加载不同的内容
在前面的示例中，单击链接会在新窗口中打开一幅图片。但如果页面上有多个链接，而且我们希望这些链接都指向同一个窗口该怎么办？。单击其中任意一个都能打开新窗口，然后显示相应的小猫图片。如果切换回主窗口，单击另一个链接的话，小窗口中的图片会被新图片替换掉。
通过此脚本，可以打开一个新窗口，其中根据所单击链接的不同，显示各式各样的内容

window.onload = newWinLinks;
function newWinLinks() {
for (var i=0; i<document.links.length; i++) {
if (document.links[i].className == "newWin") {
document.links[i].onclick = newWindow;
}
}
}
function newWindow() {
var catWindow = window.open(this.href,"catWin","width=350,height=260");
catWindow.focus();
return false;
}


focus()方法使得我们新打开的窗口位于最前面。我们需要显示某个窗口时，就可以使
用focus()。如果同时有多个窗口打开，那么使用focus()可以将指定窗口排列在最顶端。
函数以return false 结束，告知HTML 不要载入href。

提示：
使用blur()方法可以将窗口置于所有打开窗口的最后面。窗口对象的focus()和blur()方法对应于onfocus 和onblur 事件处理程序，通过它们可以在窗口获得或者失去焦点时执行操作。
相关标签： javascript 浏览器 脚本

上一篇： 使用javascript如何打开新窗口

下一篇： 用javascript 判断IE窗口是否打开

推荐阅读