本文介绍了使用JavaScript进行浏览器窗口及框架的各种操作方法，包括修改状态栏文字、弹出提示框、打开新窗口及其属性设置、在窗口间传递信息等。
1
<script language=”JavaScript”>
2 window.status = “A new status message”;
3</script>
<script language=”JavaScript”>2
window.status = “A new status message”;3
</script> 55 弹出确认提示框
1<script language=”JavaScript”>
2 var userChoice = window.confirm(“Click OK or Cancel”);
3
if (userChoice) 
{
4
document.write(“You chose OK”);
5 } else {
6 document.write(“You chose Cancel”);
7
}
8</script>
<script language=”JavaScript”>2
var userChoice = window.confirm(“Click OK or Cancel”);3
if (userChoice) { 4
document.write(“You chose OK”);5
} else { 6
document.write(“You chose Cancel”);7
}8
</script> 56 提示输入
1<script language=”JavaScript”>
2 var userName = window.prompt(“Please Enter Your Name”,”Enter Your Name Here”);
3 document.write(“Your Name is “ + userName);
4</script>
<script language=”JavaScript”>2
var userName = window.prompt(“Please Enter Your Name”,”Enter Your Name Here”);3
document.write(“Your Name is “ + userName);4
</script>57 打开一个新窗口
1//打开一个名称为myNewWindow的浏览器新窗口
2<script language=”JavaScript”>
3 window.open(“http://meil.cnblogs.com”,”myNewWindow”);
4</script>
//打开一个名称为myNewWindow的浏览器新窗口2
<script language=”JavaScript”>3
window.open(“http://meil.cnblogs.com”,”myNewWindow”);4
</script> 58 设置新窗口的大小
1<script language=”JavaScript”>
2 window.open(“http://meil.cnblogs.com”,”myNewWindow”,'height=300,width=300');
3</script>
<script language=”JavaScript”>2
window.open(“http://meil.cnblogs.com”,”myNewWindow”,'height=300,width=300');3
</script> 59 设置新窗口的位置
1<script language=”JavaScript”>
2 window.open(“http://meil.cnblogs.com”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
3</script>
<script language=”JavaScript”>2
window.open(“http://meil.cnblogs.com”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');3
</script>60 是否显示工具栏和滚动栏
1<script language=”JavaScript”>
2 window.open(http://meil.cnblogs.com","myNewWindow","toolbar=no, scrollbars=no, ");
3</script>
<script language=”JavaScript”>2
window.open(http://meil.cnblogs.com","myNewWindow","toolbar=no, scrollbars=no, ");3
</script>61 是否可以缩放新窗口的大小
1<script language=”JavaScript”>
2 window.open('http://meil.cnblogs.com' , 'myNewWindow', 'resizable=yes' );
3</script>
<script language=”JavaScript”>2
window.open('http://meil.cnblogs.com' , 'myNewWindow', 'resizable=yes' );3
</script> 62 加载一个新的文档到当前窗口
1<a href='#' onClick='document.location = '125a.html';' >Open New Document</a>
<a href='#' onClick='document.location = '125a.html';' >Open New Document</a>63 设置页面的滚动位置
1<script language=”JavaScript”>
2 if (document.all) { //如果是IE浏览器则使用scrollTop属性
3 document.body.scrollTop = 200;
4 } else { //如果是NetScape浏览器则使用pageYOffset属性
5 window.pageYOffset = 200;
6 }
7</script>
<script language=”JavaScript”>2
if (document.all) { //如果是IE浏览器则使用scrollTop属性3
document.body.scrollTop = 200;4
} else { //如果是NetScape浏览器则使用pageYOffset属性5
window.pageYOffset = 200;6
}7
</script>64 在IE中打开全屏窗口
1<a href='#' onClick=”window.open('http://meil.cnblogs.com','newWindow','fullScreen=yes');”>Open a full-screen window</a>
<a href='#' onClick=”window.open('http://meil.cnblogs.com','newWindow','fullScreen=yes');”>Open a full-screen window</a> 65 新窗口和父窗口的操作
1<script language=”JavaScript”>
2 //定义新窗口
3 var newWindow = window.open(“128a.html”,”newWindow”);
4 newWindow.close(); //在父窗口中关闭打开的新窗口
5</script>
6
7在新窗口中关闭父窗口
8window.opener.close()
<script language=”JavaScript”>2
//定义新窗口3
var newWindow = window.open(“128a.html”,”newWindow”);4
newWindow.close(); //在父窗口中关闭打开的新窗口5
</script>6
7
在新窗口中关闭父窗口8
window.opener.close()66 往新窗口中写内容
1<script language=”JavaScript”>
2 var newWindow = window.open(“”,”newWindow”);
3 newWindow.document.open();
4 newWindow.document.write(“This is a new window”);
5 newWIndow.document.close();
6</script>
<script language=”JavaScript”>2
var newWindow = window.open(“”,”newWindow”);3
newWindow.document.open();4
newWindow.document.write(“This is a new window”);5
newWIndow.document.close();6
</script> 67 加载页面到框架页面
1<frameset cols=”50%,*”>
2<frame name=”frame1” src="/”135a.html"”>
3<frame name=”frame2” src="/”about:blank"”>
4</frameset>
5在frame1中加载frame2中的页面
6parent.frame2.document.location = “135b.html”;
<frameset cols=”50%,*”>2
<frame name=”frame1” src="/”135a.html"”>3
<frame name=”frame2” src="/”about:blank"”>4
</frameset>5
在frame1中加载frame2中的页面6
parent.frame2.document.location = “135b.html”; 68 在框架页面之间共享脚本
如果在frame1中html文件中有个脚本
1function doAlert() {
2 window.alert(“Frame 1 is loaded”);
3}
那么在frame2中可以如此调用该方法function doAlert() { 2
window.alert(“Frame 1 is loaded”);3
} 1<body onLoad=”parent.frame1.doAlert();”>
2 This is frame 2.
3</body>
4
<body onLoad=”parent.frame1.doAlert();”>2
This is frame 2.3
</body> 4
69 数据公用
可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用
1<script language=”JavaScript”>
2 var persistentVariable = “This is a persistent value”;
3</script>
4<frameset cols=”50%,*”>
5<frame name=”frame1” src="/”138a.html"”>
6<frame name=”frame2” src="/”138b.html"”>
7</frameset>
这样在frame1和frame2中都可以使用变量persistentVariable <script language=”JavaScript”>2
var persistentVariable = “This is a persistent value”;3
</script>4
<frameset cols=”50%,*”>5
<frame name=”frame1” src="/”138a.html"”>6
<frame name=”frame2” src="/”138b.html"”>7
</frameset> 70 框架代码库
根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库
1<frameset cols=”0,50%,*”>
2<frame name=”codeFrame” src="/”140code.html"”>
3<frame name=”frame1” src="/”140a.html"”>
4<frame name=”frame2” src="/”140b.html"”>
5</frameset>
6
<frameset cols=”0,50%,*”>2
<frame name=”codeFrame” src="/”140code.html"”>3
<frame name=”frame1” src="/”140a.html"”>4
<frame name=”frame2” src="/”140b.html"”>5
</frameset> 6
扫一扫
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
