JavaScript方法和技巧大全
基础知识
1 创建脚本块 <script language=” JavaScript” > JavaScript code goes here </script>
2 隐藏脚本代码 <script language=” JavaScript” ><!-- document.write(“ Hello” ); --> </script>
在不支持 JavaScript的浏览器中将不执行相关代码
1 创建脚本块 <script language=” JavaScript” > JavaScript code goes here </script>
2 隐藏脚本代码 <script language=” JavaScript” ><!-- document.write(“ Hello” ); --> </script>
在不支持 JavaScript的浏览器中将不执行相关代码
3 浏览器不支持的时候显示
<noscript> Hello to the non-JavaScript browser.</noscript>
4 链接外部脚本文件 <script language=” JavaScript” src="/” filename.js"” ></script>
5 注释脚本 // This is a comment
4 链接外部脚本文件 <script language=” JavaScript” src="/” filename.js"” ></script>
5 注释脚本 // This is a comment
document.write(“
Hello”
); // This is a comment
/* All of this is a comment */
6 输出到浏览器 document.write(“ <strong>Hello</strong>” );
/* All of this is a comment */
6 输出到浏览器 document.write(“ <strong>Hello</strong>” );
7 定义变量
var myVariable = “
some value”
;
8 字符串相加
var myString = “
String1” + “
String2”;
9 字符串搜索
<script language=”
JavaScript”
><!-- var myVariable = “
Hello there”
;
var therePlace = myVariable.search(“
there”
); document.write(therePlace);// --> </script>
10 字符串替换 thisVar.replace(“ Monday” ,” Friday” );
10 字符串替换 thisVar.replace(“ Monday” ,” Friday” );
11 格式化字串
<script language=”
JavaScript”
><!—
var myVariable = “
Hello there”
; document.write(myVariable.big() + “
<br>”
);
document.write(myVariable.blink() + “
<br>”
); document.write(myVariable.bold() + “
<br>”
);
document.write(myVariable.fixed() + “ <br>” );document.write(myVariable.fontcolor(“ red” ) + “ <br>” );
document.write(myVariable.fontsize(“ 18pt” ) + “ <br>” );document.write(myVariable.italics() + “ <br>” );
document.write(myVariable.small() + “ <br>” );document.write(myVariable.strike() + “ <br>” );
document.write(myVariable.sub() + “ <br>” );document.write(myVariable.sup() + “ <br>” );
document.write(myVariable.fixed() + “ <br>” );document.write(myVariable.fontcolor(“ red” ) + “ <br>” );
document.write(myVariable.fontsize(“ 18pt” ) + “ <br>” );document.write(myVariable.italics() + “ <br>” );
document.write(myVariable.small() + “ <br>” );document.write(myVariable.strike() + “ <br>” );
document.write(myVariable.sub() + “ <br>” );document.write(myVariable.sup() + “ <br>” );
document.write(myVariable.toLowerCase() + “
<br>”
); document.write(myVariable.toUpperCase() + “
<br>”
);
var firstString = “ My String” ; var finalString = firstString.bold().toLowerCase().fontcolor(“ red” );
// --></script>
12 创建数组 <script language=” JavaScript” ><!-- var myArray = new Array(5); myArray[0] = “ First Entry” ;
myArray[1] = “ Second Entry” ;myArray[2] = “ Third Entry” ;myArray[3] = “ Fourth Entry” ; myArray[4] = “ Fifth Entry” ;
var anotherArray = new Array(“ First Entry” ,” Second Entry” ,” Third Entry” ,” Fourth Entry” ,” Fifth Entry” );
// --></script>
13 数组排序 <script language=” JavaScript” ><!-- var myArray = new Array(5); myArray[0] = “ z” ; myArray[1] = “ c” ;
myArray[2] = “ d” ;myArray[3] = “ a” ;myArray[4] = “ q” ;document.write(myArray.sort()); // --> </script>
14 分割字符串 1: <script language=” JavaScript” ><!-- var myVariable = “ a,b,c,d” ;
var firstString = “ My String” ; var finalString = firstString.bold().toLowerCase().fontcolor(“ red” );
// --></script>
12 创建数组 <script language=” JavaScript” ><!-- var myArray = new Array(5); myArray[0] = “ First Entry” ;
myArray[1] = “ Second Entry” ;myArray[2] = “ Third Entry” ;myArray[3] = “ Fourth Entry” ; myArray[4] = “ Fifth Entry” ;
var anotherArray = new Array(“ First Entry” ,” Second Entry” ,” Third Entry” ,” Fourth Entry” ,” Fifth Entry” );
// --></script>
13 数组排序 <script language=” JavaScript” ><!-- var myArray = new Array(5); myArray[0] = “ z” ; myArray[1] = “ c” ;
myArray[2] = “ d” ;myArray[3] = “ a” ;myArray[4] = “ q” ;document.write(myArray.sort()); // --> </script>
14 分割字符串 1: <script language=” JavaScript” ><!-- var myVariable = “ a,b,c,d” ;
var stringArray = myVariable.split(“
,”
); document.write(stringArray[0]); document.write(stringArray[1]);
document.write(stringArray[2]);document.write(stringArray[3]); // --></script>
15 弹出警告信息 <script language=” JavaScript” > <!-- window.alert(“ Hello” ); // --> </script>
16 弹出确认框 <script language=” JavaScript” ><!-- var result = window.confirm(“ Click OK to continue” ); // --> </script>
17 定义函数 <script language=” JavaScript” ><!-- function multiple(number1,number2) { var result = number1 * number2;
return result; } // --> </script>
18 调用 JS函数 <a href=” #” onClick=” functionName()” >Link text</a><a href="/” javascript:functionName"()” >Link text</a>
19 在页面加载完成后执行函数 <body onLoad=” functionName();” > Body of the page </body>
20 条件判断 <script> <!-- var userChoice = window.confirm(“ Choose OK or Cancel” ); var result = (userChoice == true) ? “ OK” : “ Cancel” ; document.write(result); // --> </script>
21 指定次数循环 <script> <!-- var myArray = new Array(3); myArray[0] = “ Item 0”; myArray[1] = “ Item 1”;
myArray[2] = “ Item 2”; for (i = 0; i < myArray.length; i++) { document.write(myArray[ i] + “ <br>” ); } // --></script>
22 设定将来执行 <script> <!-- function hello() { window.alert(“ Hello” ); } window.setTimeout(“ hello()” ,5000); // -->
</script>
23 定时执行函数 <script> <!-- function hello() { window.alert(“ Hello” ); window.setTimeout(“ hello()” ,5000); }
window.setTimeout(“ hello()” ,5000); // --> </script>
document.write(stringArray[2]);document.write(stringArray[3]); // --></script>
15 弹出警告信息 <script language=” JavaScript” > <!-- window.alert(“ Hello” ); // --> </script>
16 弹出确认框 <script language=” JavaScript” ><!-- var result = window.confirm(“ Click OK to continue” ); // --> </script>
17 定义函数 <script language=” JavaScript” ><!-- function multiple(number1,number2) { var result = number1 * number2;
return result; } // --> </script>
18 调用 JS函数 <a href=” #” onClick=” functionName()” >Link text</a><a href="/” javascript:functionName"()” >Link text</a>
19 在页面加载完成后执行函数 <body onLoad=” functionName();” > Body of the page </body>
20 条件判断 <script> <!-- var userChoice = window.confirm(“ Choose OK or Cancel” ); var result = (userChoice == true) ? “ OK” : “ Cancel” ; document.write(result); // --> </script>
21 指定次数循环 <script> <!-- var myArray = new Array(3); myArray[0] = “ Item 0”; myArray[1] = “ Item 1”;
myArray[2] = “ Item 2”; for (i = 0; i < myArray.length; i++) { document.write(myArray[ i] + “ <br>” ); } // --></script>
22 设定将来执行 <script> <!-- function hello() { window.alert(“ Hello” ); } window.setTimeout(“ hello()” ,5000); // -->
</script>
23 定时执行函数 <script> <!-- function hello() { window.alert(“ Hello” ); window.setTimeout(“ hello()” ,5000); }
window.setTimeout(“ hello()” ,5000); // --> </script>
24 取消定时执行
<script> <!-- function hello() { window.alert(“
Hello”
); }
var myTimeout = window.setTimeout(“
hello()”
,5000); window.clearTimeout(myTimeout);// --> </script>
25 在页面卸载时候执行函数 <body onUnload=” functionName();” > Body of the page </body>
2:浏览器输出 26 访问 document对象
<script language=” JavaScript” >var myURL = document.URL; window.alert(myURL);</script>
27 动态输出 HTML <script language=” JavaScript” >document.write(“ <p>Here’ s some information about this document:</p>” );
document.write(“ <ul>” );document.write(“ <li>Referring Document: “ + document.referrer + “ </li>” ); document.write(“ <li>Domain: “ + document.domain + “ </li>” ); document.write(“ <li>URL: “ + document.URL + “ </li>” );
document.write(“ </ul>” );</script>
28 输出换行 document.writeln(“ <strong>a</strong>” ); document.writeln(“ b” );
29 输出日期 <script language=” JavaScript” > var thisDate = new Date(); document.write(thisDate.toString()); </script>
30 指定日期的时区 <script language=” JavaScript” > var myOffset = -2; var currentDate = new Date();
25 在页面卸载时候执行函数 <body onUnload=” functionName();” > Body of the page </body>
2:浏览器输出 26 访问 document对象
<script language=” JavaScript” >var myURL = document.URL; window.alert(myURL);</script>
27 动态输出 HTML <script language=” JavaScript” >document.write(“ <p>Here’ s some information about this document:</p>” );
document.write(“ <ul>” );document.write(“ <li>Referring Document: “ + document.referrer + “ </li>” ); document.write(“ <li>Domain: “ + document.domain + “ </li>” ); document.write(“ <li>URL: “ + document.URL + “ </li>” );
document.write(“ </ul>” );</script>
28 输出换行 document.writeln(“ <strong>a</strong>” ); document.writeln(“ b” );
29 输出日期 <script language=” JavaScript” > var thisDate = new Date(); document.write(thisDate.toString()); </script>
30 指定日期的时区 <script language=” JavaScript” > var myOffset = -2; var currentDate = new Date();
var userOffset = currentDate.getTimezoneOffset()/60;var timeZoneDifference = userOffset - myOffset;
currentDate.setHours(currentDate.getHours() + timeZoneDifference);
currentDate.setHours(currentDate.getHours() + timeZoneDifference);
document.write(“
The time and date in Central Europe is: “
+ currentDate.toLocaleString());</script>
31 设置日期输出格式 <script language=” JavaScript” > var thisDate = new Date();
31 设置日期输出格式 <script language=” JavaScript” > var thisDate = new Date();
var thisTimeString = thisDate.getHours() + “
:”
+ thisDate.getMinutes();
var thisDateString = thisDate.getFullYear() + “
/”
+ thisDate.getMonth() + “
/”
+ thisDate.getDate();
document.write(thisTimeString + “ on “ + thisDateString); </script>
32 读取 URL参数 <script language=” JavaScript” > var urlParts = document.URL.split(“ ?” );
var parameterParts = urlParts[1].split(“ &” );for (i = 0; i < parameterParts.length; i++) {
var pairParts = parameterParts[ i] .split(“ =” );var pairName = pairParts[0]; var pairValue = pairParts[1];
document.write(pairName + “ :“ +pairValue ); }</script>
document.write(thisTimeString + “ on “ + thisDateString); </script>
32 读取 URL参数 <script language=” JavaScript” > var urlParts = document.URL.split(“ ?” );
var parameterParts = urlParts[1].split(“ &” );for (i = 0; i < parameterParts.length; i++) {
var pairParts = parameterParts[ i] .split(“ =” );var pairName = pairParts[0]; var pairValue = pairParts[1];
document.write(pairName + “ :“ +pairValue ); }</script>
你还以为
HTML是无状态的么?
33 打开一个新的
document对象
<script language=”
JavaScript”
> function newDocument() {document.open();
document.write(“
<p>This is a New Document.</p>”
);document.close(); }</script>
34 页面跳转 <script language=” JavaScript” >window.location = [url]http://www.phpNet.cn/[/url]” ; </script>
35 添加网页加载进度窗口 <html><head><script language='javaScript'>
34 页面跳转 <script language=” JavaScript” >window.location = [url]http://www.phpNet.cn/[/url]” ; </script>
35 添加网页加载进度窗口 <html><head><script language='javaScript'>
var placeHolder = window.open('holder.html','placeholder','width=200,height=200'); </script><title>The Main Page</title>
</head><body ><p>This is the main page</p></body></html>
3:图像
36 读取图像属性 <img src="/” image1.jpg"” name=” myImage” ><a href=” # ” onClick=” window.alert(document.myImage.width)” >Width</a>
</head><body ><p>This is the main page</p></body></html>
3:图像
36 读取图像属性 <img src="/” image1.jpg"” name=” myImage” ><a href=” # ” onClick=” window.alert(document.myImage.width)” >Width</a>
37 动态加载图像
<script language=”
JavaScript”
> myImage = new Image; myImage.src = “
Tellers1.jpg”
;</script>
38 简单的图像替换 <script language=” JavaScript” >rollImage = new Image; rollImage.src = “ rollImage1.jpg” ;
defaultImage = new Image;defaultImage.src = “ image1.jpg” ; </script>
38 简单的图像替换 <script language=” JavaScript” >rollImage = new Image; rollImage.src = “ rollImage1.jpg” ;
defaultImage = new Image;defaultImage.src = “ image1.jpg” ; </script>
<a href="/”
myUrl"”
onMouseOver=”
document.myImage.src = rollImage.src;”
onMouseOut=” document.myImage.src = defaultImage.src;” >
onMouseOut=” document.myImage.src = defaultImage.src;” >
<img src="/”
image1.jpg"”
name=”
myImage”
width=100 height=100 border=0>
39 随机显示图像 <script language=” JavaScript” >var imageList = new Array; imageList[0] = “ image1.jpg” ;
39 随机显示图像 <script language=” JavaScript” >var imageList = new Array; imageList[0] = “ image1.jpg” ;
imageList[1] = “
image2.jpg”
;imageList[2] = “
image3.jpg”
;imageList[3] = “
image4.jpg”
;
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write(‘
<img src=”’
+ imageList[imageChoice] + ‘“
>’
);</script>
40 函数实现的图像替换 <script language=” JavaScript” > var source = 0; var replacement = 1;
40 函数实现的图像替换 <script language=” JavaScript” > var source = 0; var replacement = 1;
function createRollOver(originalImage,replacementImage) { var imageArray = new Array; imageArray[source] = new Image;
imageArray[source].src = originalImage; imageArray[replacement] = new Image;
imageArray[replacement].src = replacementImage; return imageArray; }
imageArray[source].src = originalImage; imageArray[replacement] = new Image;
imageArray[replacement].src = replacementImage; return imageArray; }
var rollImage1 = createRollOver(“
image1.jpg”
,”
rollImage1.jpg”
); </script>
<a href=” #” onMouseOver=” document.myImage1.src = rollImage1[replacement].src;”
onMouseOut=” document.myImage1.src = rollImage1[source].src;” > <img src="/” image1.jpg"” width=100 name=” myImage1” border=0> </a>
41 创建幻灯片 <script language=” JavaScript” >var imageList = new Array; imageList[0] = new Image;
<a href=” #” onMouseOver=” document.myImage1.src = rollImage1[replacement].src;”
onMouseOut=” document.myImage1.src = rollImage1[source].src;” > <img src="/” image1.jpg"” width=100 name=” myImage1” border=0> </a>
41 创建幻灯片 <script language=” JavaScript” >var imageList = new Array; imageList[0] = new Image;
imageList[0].src = “
image1.jpg”
;imageList[1] = new Image;imageList[1].src = “
image2.jpg”
;
imageList[2] = new Image; imageList[2].src = “
image3.jpg”
; imageList[3] = new Image; imageList[3].src = “
image4.jpg”
;
function slideShow(imageNumber) { document.slideShow.src = imageList[imageNumber].src; imageNumber += 1;
if (imageNumber < imageList.length) { window.setTimeout(“ slideShow(“ + imageNumber + “ )” ,3000); }}</script>
</head><body onLoad=” slideShow(0)” ><img src="/” image1.jpg"” width=100 name=” slideShow” >
function slideShow(imageNumber) { document.slideShow.src = imageList[imageNumber].src; imageNumber += 1;
if (imageNumber < imageList.length) { window.setTimeout(“ slideShow(“ + imageNumber + “ )” ,3000); }}</script>
</head><body onLoad=” slideShow(0)” ><img src="/” image1.jpg"” width=100 name=” slideShow” >
42 随机广告图片
<script language=”
JavaScript”
>var imageList = new Array; imageList[0] = “
image1.jpg”
;
imageList[1] = “
image2.jpg”
;imageList[2] = “
image3.jpg”
; imageList[3] = “
image4.jpg”
; var urlList = new Array;
urlList[0] = [url]http://phpNet.cn/[/url]” ; urlList[1] = [url]http://phpNet.cn/[/url]” ; urlList[2] = [url]http://www.phpNet.cn/[/url]” ;
urlList[3] = [url]http://www.phpNet.cn/bbs/[/url]” ; var imageChoice = Math.floor(Math.random() * imageList.length);
document.write(‘ <a href=”’ + urlList[imageChoice] + ‘“ ><img src=”’ + imageList[imageChoice] + ‘“ ></a>’ );</script>
4:表单
urlList[0] = [url]http://phpNet.cn/[/url]” ; urlList[1] = [url]http://phpNet.cn/[/url]” ; urlList[2] = [url]http://www.phpNet.cn/[/url]” ;
urlList[3] = [url]http://www.phpNet.cn/bbs/[/url]” ; var imageChoice = Math.floor(Math.random() * imageList.length);
document.write(‘ <a href=”’ + urlList[imageChoice] + ‘“ ><img src=”’ + imageList[imageChoice] + ‘“ ></a>’ );</script>
4:表单
43 表单构成
<form method=”
post”
action=”
target.html”
name=”
thisForm”
><input type=”
text”
name=”
myText”
>
<select name=” mySelect” ><option value=” 1” >First Choice</option><option value=” 2” >Second Choice</option>
</select><br><input type=” submit” value=” Submit Me” ></form>
44 访问表单中的文本框内容 <form name=” myForm” ><input type=” text” name=” myText” >/form><a href='#' >Check Text Field</a>
45 动态复制文本框内容 <form name=” myForm” > Enter some Text: <input type=” text” name=” myText” ><br>
Copy Text: <input type=” text” name=” copyText” ></form><a href=” #” onClick=” document.myForm.copyText.value =
document.myForm.myText.value;” >Copy Text Field</a>
<select name=” mySelect” ><option value=” 1” >First Choice</option><option value=” 2” >Second Choice</option>
</select><br><input type=” submit” value=” Submit Me” ></form>
44 访问表单中的文本框内容 <form name=” myForm” ><input type=” text” name=” myText” >/form><a href='#' >Check Text Field</a>
45 动态复制文本框内容 <form name=” myForm” > Enter some Text: <input type=” text” name=” myText” ><br>
Copy Text: <input type=” text” name=” copyText” ></form><a href=” #” onClick=” document.myForm.copyText.value =
document.myForm.myText.value;” >Copy Text Field</a>
46 侦测文本框的变化
<form name=”
myForm”
>Enter some Text: <input type=”
text”
name=”
myText”
onChange=”
alert(this.value);”
></form>
47 访问选中的 Select <form name=” myForm” > <select name=” mySelect” ><option value=” First Choice” >1</option>
<option value=” Second Choice” >2</option><option value=” Third Choice” >3</option></select></form><a href='#' >Check Selection List</a>
47 访问选中的 Select <form name=” myForm” > <select name=” mySelect” ><option value=” First Choice” >1</option>
<option value=” Second Choice” >2</option><option value=” Third Choice” >3</option></select></form><a href='#' >Check Selection List</a>
48 动态增加
Select项
<form name=”
myForm”
><select name=”
mySelect”
><option value=”
First Choice”
>1</option>
<option value=” Second Choice” >2</option></select></form><script language=” JavaScript” >
<option value=” Second Choice” >2</option></select></form><script language=” JavaScript” >
document.myForm.mySelect.length++;document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “
3”
;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “ Third Choice” ;</script>
49 验证表单字段 <script language=” JavaScript” >function checkField(field) {if (field.value == “” ) {
window.alert(“ You must enter a value in the field” );field.focus(); } }</script>
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “ Third Choice” ;</script>
49 验证表单字段 <script language=” JavaScript” >function checkField(field) {if (field.value == “” ) {
window.alert(“ You must enter a value in the field” );field.focus(); } }</script>
<form name=”
myForm”
action=”
target.html”
>
Text Field: <input type=”
text”
name=”
myField”
onBlur=”
checkField(this)”
><br><input type=”
submit”
></form>
50 验证 Select项 function checkList(selection) { if (selection.length == 0) {
50 验证 Select项 function checkList(selection) { if (selection.length == 0) {
window.alert(“
You must make a selection from the list.”
);return false; }return true;}
51 动态改变表单的 action <form name=” myForm” action=” login.html” >Username: <input type=” text” name=” username” ><br>
Password: <input type=” password” name=” password” ><br><input type=” button” value=” Login” onClick=” this.form.submit();” ><input type=” button” value=” Register” onClick=” this.form.action = ‘ register.html’ ; this.form.submit();” ><input type=” button” value=” Retrieve Password” onClick=” this.form.action = ‘ password.html’ ; this.form.submit();” ></form>
52 使用图像按钮 <form name=” myForm” action=” login.html” > Username: <input type=” text” name=” username” ><br>
Password: <input type=” password” name=” password” ><br><input type=” image” src="/” login.gif"” value=” Login” >
</form>
51 动态改变表单的 action <form name=” myForm” action=” login.html” >Username: <input type=” text” name=” username” ><br>
Password: <input type=” password” name=” password” ><br><input type=” button” value=” Login” onClick=” this.form.submit();” ><input type=” button” value=” Register” onClick=” this.form.action = ‘ register.html’ ; this.form.submit();” ><input type=” button” value=” Retrieve Password” onClick=” this.form.action = ‘ password.html’ ; this.form.submit();” ></form>
52 使用图像按钮 <form name=” myForm” action=” login.html” > Username: <input type=” text” name=” username” ><br>
Password: <input type=” password” name=” password” ><br><input type=” image” src="/” login.gif"” value=” Login” >
</form>
53 表单数据的加密
<SCRIPT LANGUAGE='JavaScript'><!-- function encrypt(item) {var newItem = '';
for (i=0; i < item.length; i++) { newItem += item.charCodeAt(i) + '.'; }return newItem; }
function encryptForm(myForm) { for (i=0; i < myForm.elements.length; i++) {
myForm.elements[ i] .value = encrypt(myForm.elements[ i] .value);}}//--></SCRIPT>
<form name='myForm' > Enter Some Text: <input type=text name=myField><input type=submit></form>
5:窗口和框架
function encryptForm(myForm) { for (i=0; i < myForm.elements.length; i++) {
myForm.elements[ i] .value = encrypt(myForm.elements[ i] .value);}}//--></SCRIPT>
<form name='myForm' > Enter Some Text: <input type=text name=myField><input type=submit></form>
5:窗口和框架
54 改变浏览器状态栏文字提示
<script language=”
JavaScript”
> window.status = “
A new status message”
;</script>
55 弹出确认提示框 <script language=” JavaScript” >var userChoice = window.confirm(“ Click OK or Cancel” );
55 弹出确认提示框 <script language=” JavaScript” >var userChoice = window.confirm(“ Click OK or Cancel” );
if (userChoice) {document.write(“
You chose OK”
);} else { document.write(“
You chose Cancel”
); }</script>
56 提示输入 <script language=” JavaScript” >var userName = window.prompt(“ Please Enter Your Name” ,” Enter Your Name Here” );document.write(“ Your Name is “ + userName);</script>
56 提示输入 <script language=” JavaScript” >var userName = window.prompt(“ Please Enter Your Name” ,” Enter Your Name Here” );document.write(“ Your Name is “ + userName);</script>
57 打开一个新窗口
//打开一个名称为
myNewWindow的浏览器新窗口
<script language=”
JavaScript”
>
window.open([url]http://www.phpNet.cn/[/url]”,”myNewWindow”
); </script>
58 设置新窗口的大小
<script language=”
JavaScript”
>window.open([url]http://www.phpNet.cn/[/url]”,”myNewWindow”,'height=300,width=300');</script>
59 设置新窗口的位置 <script language=” JavaScript” >
59 设置新窗口的位置 <script language=” JavaScript” >
window.open([url]http://www.phpNet.cn/[/url]”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
</script>
60 是否显示工具栏和滚动栏 <script language=” JavaScript” >window.open(“ http:
61 是否可以缩放新窗口的大小 <script language=” JavaScript” >window.open([url]http://www.phpNet.cn/[/url]' , 'myNewWindow', 'resizable=yes' );</script>
</script>
60 是否显示工具栏和滚动栏 <script language=” JavaScript” >window.open(“ http:
61 是否可以缩放新窗口的大小 <script language=” JavaScript” >window.open([url]http://www.phpNet.cn/[/url]' , 'myNewWindow', 'resizable=yes' );</script>
62 加载一个新的文档到当前窗口
<a href='#' 125a.html';' >Open New Document</a>
63 设置页面的滚动位置 <script language=” JavaScript” > if (document.all) { //如果是 IE浏览器则使用 scrollTop属性
document.body.scrollTop = 200;} else { //如果是 NetScape浏览器则使用 pageYOffset属性
window.pageYOffset = 200;}</script>
63 设置页面的滚动位置 <script language=” JavaScript” > if (document.all) { //如果是 IE浏览器则使用 scrollTop属性
document.body.scrollTop = 200;} else { //如果是 NetScape浏览器则使用 pageYOffset属性
window.pageYOffset = 200;}</script>
64 在
IE中打开全屏窗口
<a href='#' onClick=” window.open([url]http://www.phpNet.cn/[/url]','newWindow','fullScreen=yes');”>Open a full-screen window</a>
65 新窗口和父窗口的操作 <script language=” JavaScript” > //定义新窗口
<a href='#' onClick=” window.open([url]http://www.phpNet.cn/[/url]','newWindow','fullScreen=yes');”>Open a full-screen window</a>
65 新窗口和父窗口的操作 <script language=” JavaScript” > //定义新窗口
var newWindow = window.open(“
128a
.html”
,”
newWindow”
); newWindow.close(); //在父窗口中关闭打开的新窗口
</script>
在新窗口中关闭父窗口 window.opener.close()
66 往新窗口中写内容 <script language=” JavaScript” > var newWindow = window.open(“” ,” newWindow” );
在新窗口中关闭父窗口 window.opener.close()
66 往新窗口中写内容 <script language=” JavaScript” > var newWindow = window.open(“” ,” newWindow” );
newWindow.document.open(); newWindow.document.write(“
This is a new window”
); newWIndow.document.close();</script>
67 加载页面到框架页面 <frameset cols=” 50%,*” > <frame name=” frame1” src="/” 135a .html"” >
67 加载页面到框架页面 <frameset cols=” 50%,*” > <frame name=” frame1” src="/” 135a .html"” >
<frame name=”
frame2” src="/”
about:blank"”
></frameset>
在
frame1中加载
frame2中的页面
parent.frame2.document.location = “
135b.html”
;
68 在框架页面之间共享脚本
如果在
frame1中
html文件中有个脚本
function doAlert() { window.alert(“
Frame 1 is loaded”
);}
那么在
frame2中可以如此调用该方法
<body onLoad=”
parent.frame1.doAlert();”
>This is frame 2.</body>
69 数据公用 可以在框架页面定义数据项,使得该数据可以被多个框架中的页面公用
<script language=” JavaScript” >var persistentVariable = “ This is a persistent value” ;</script>
<frameset cols=” 50%,*” ><frame name=” frame1” src="/” 138a .html"” ><frame name=” frame2” src="/” 138b.html"” > </frameset>这样在 frame1和 frame2中都可以使用变量 persistentVariable
70 框架代码库 根据以上的一些思路,我们可以使用一个隐藏的框架页面来作为整个框架集的代码库
<frameset cols=” 0,50%,*” > <frame name=” codeFrame” src="/” 140code.html"” > <frame name=” frame1” src="/” 140a .html"” >
<frame name=” frame2” src="/” 140b.html"” ></frameset>
69 数据公用 可以在框架页面定义数据项,使得该数据可以被多个框架中的页面公用
<script language=” JavaScript” >var persistentVariable = “ This is a persistent value” ;</script>
<frameset cols=” 50%,*” ><frame name=” frame1” src="/” 138a .html"” ><frame name=” frame2” src="/” 138b.html"” > </frameset>这样在 frame1和 frame2中都可以使用变量 persistentVariable
70 框架代码库 根据以上的一些思路,我们可以使用一个隐藏的框架页面来作为整个框架集的代码库
<frameset cols=” 0,50%,*” > <frame name=” codeFrame” src="/” 140code.html"” > <frame name=” frame1” src="/” 140a .html"” >
<frame name=” frame2” src="/” 140b.html"” ></frameset>