Window 对象（2）

16-01-26 来源：[db:作者]

收藏我要投稿

点击一个按钮时，打开一个新窗口

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function open_win() 
{
window.open("http://www.w3cschool.cc");
}
</script>
</head>

<body>
<form>
<input type="button" value="Open Window" onclick="open_win()">
</form>
</body>

</html>

运行结果

打开一个新窗口，并控制其外观

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function open_win()
{
window.open("http://www.w3schools.com","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");
}
</script>
</head>

<body>
<form>
<input type="button" value="Open Window" onclick="open_win()">
</form>
</body>

</html>

运行结果

打开多个新窗口

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function open_win() 
{
window.open("http://www.microsoft.com/");
window.open("http://www.w3schools.com/");
}
</script>
</head>

<body>
<form>
<input type="button" value="Open Windows" onclick="open_win()">
</form>
</body>

</html>

运行结果

确保新的窗口没有获得焦点

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function open_win() 
{
window.open("http://www.microsoft.com/");
window.open("http://www.w3schools.com/");
}
</script>
</head>

<body>
<form>
<input type="button" value="Open Windows" onclick="open_win()">
</form>
</body>

</html>

运行结果

确保新的窗口获得焦点

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function openWin()
{
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>This is 'myWindow'</p>");
myWindow.focus();
}
</script>
</head>
<body>

<input type="button" value="Open window" onclick="openWin()" />

</body>
</html>

运行结果

关闭新窗口

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function openWin()
{
myWindow=window.open("","","width=200,height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");
}

function closeWin()
{
myWindow.close();
}
</script>
</head>
<body>

<input type="button" value="Open 'myWindow'" onclick="openWin()" />
<input type="button" value="Close 'myWindow'" onclick="closeWin()" />

</body>
</html>

运行结果

检查新的窗口是否已关闭

源代码

<!DOCTYPE html>
<html>
<head>
<script>

var myWindow;

function openWin()
{
myWindow=window.open("","","width=400,height=200");
}

function closeWin()
{
if (myWindow)
  {
  myWindow.close();
  }
}

function checkWin()
{
if (!myWindow)
  {
  document.getElementById("msg").innerHTML="'myWindow' has never been opened!";
  }
else
  {
  if (myWindow.closed)
    { 
    document.getElementById("msg").innerHTML="'myWindow' has been closed!";
    }
  else
    {
    document.getElementById("msg").innerHTML="'myWindow' has not been closed!";
    }
  }	
}
</script>
</head>
<body>

<input type="button" value="Open 'myWindow'" onclick="openWin()" />
<input type="button" value="Close 'myWindow'" onclick="closeWin()" />
<br><br>
<input type="button" value="Has 'myWindow' been closed?" onclick="checkWin()" />
<br><br>
<div id="msg"></div>
</body>
</html>

运行结果

返回新窗口的名字

源代码

<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin()
{
myWindow=window.open('','MsgWindow','width=200,height=100');
myWindow.document.write("<p>This window's name is: " + myWindow.name + "</p>");
}
</script>
</head>
<body>

<input type="button" value="Open 'myWindow'" onclick="openWin()" />

</body>
</html>

运行结果

点击复制链接与好友分享!回本站首页