JavaScript 網頁技巧
1.表單運用跨視窗傳遞資料
藉由另一個視窗將資料傳回表單並自動關閉視窗
最想學的語言 查詢
<form name=”form1″ action=””>
<input type=”text” name=”fruit”>
<a href=”#” >option</a>
</form>
製作查詢頁面的下拉式選單(另存一個網頁s.html)
<script type=”text/javascript”>
function choice() {
sel = document.forms[0].elements[0];
opener.document.form1.fruit.value =
sel.options[sel.selectedIndex].text;
self.close();
}
</script>
<form><select >
<option>select</option>
<option>Korean</option>
<option>Japanese</option>
<option>French</option>
</select></form>
自行修改選擇的主題與項目
2.防止按鈕重複送出內容
我們使用一些程式例如送信.發表留言等..若程式內沒有禁止重複內容的功能,有些主機執行速度比較慢,遇到急性子的訪客可能會多按幾次送出按鈕,而造成重複發信或相同的留言內容,我們可以使用這個JS來防止這樣的情形.
<script type=”text/javascript”>
<!– //
function submitform() {
document.formname.button.disabled = true;
submitform = disableButton;
document.formname.submit();
return false;
}
function disableButton() {
alert(‘In processing’);
return false;
}
// –>
</script>
<form name=”formname” action=”xxx.cgi” method=”post”>
<button name=”button” >SUBMIT</button>
</form>
3.實現內置框架高度自動調整
一般內置框架都是固定高度的,內容太長則會顯示捲軸,若將捲軸屬性設為 scrolling=”no” ,不會出現捲軸但是過長的內容會被截斷,這教學利用javascript來實現動態調整,不顯示捲軸,可以依內容的長短自動調整高度,看起來就像網頁的一部分,而且這javascript可相容IE/NS/Firefox瀏覽器。
下載JS檔案 放置於網頁目錄下
<script type=”text/javascript” src=”embed.js”></script> <embed id=”myTestFrameID” marginwidth=”0″ marginheight=”0″ frameborder=”0″ scrolling=”no” src=”home.html” width=”100%” height=”300″></embed> home.html 是內置框架中的網頁
請使用內部連結例如../home.html
用http://的連結方式無法正常顯示
4.表單自動全選的技巧
很多人習慣將要提供複製的內容或語法等..放在多行文字表單
有時候文字太長要反白文字再複製,好像又有那麼一點點麻煩,
自動全選不是更好.
自動全選
複製語法貼於表單標籤框框內
按一下全選
複製語法貼於表單標籤框框內
多行<textarea rows=”7″ name=”s1″ cols=”60″ 語法放這裡>
單行<input type=”text” name=”t1″ size=”15″ 語法放這裡>
5.網頁保護之非法連結
你的網頁曾經遭他人盜用連結嗎?自己辛苦的成果例如教學或遊戲等…讓他人佔為己有流量大增,是不是一件很嘔的事?這篇教學使用JS來防止盜連
<script type=”text/javascript”>
▼if(who && who.indexOf(“www.hsiu28.net”) == -1)
<!–
var who=document.referrer;
if(who && who.indexOf(“www.hsiu28.net”) == -1){
alert(“Illegl Link . Copyright oecspace.com”);
top.location.href = “http://www.hsiu28.net/”;
}
//–>
</script>
這裡是設定只有這個網址可以連結到這個網頁(不要使用轉址)
意思就是只有這個空間的連結才是有效的
▼alert(“Illegl link . Copyright oecspace.com “);
設定非法連結的警告訊息
▼top.location.href = “http://www.hsiu28.net/”;
設定非法連結後會跳至哪個網頁(最好設為你的首頁)
6.同時開啟兩個框架內容
一般連結通常都只有指定一個框架內顯示內容
這語法可以讓一個連結開啟兩個網頁在不同的框架內
<script type=”text/javascript”>
<!–
function load(p1,p2) {
parent.main1.location.href=p1;
parent.main2.location.href=p2;
}
//–>
</script>
<a href=”javascript:load(‘home.htm’,’home2.htm’)” >LINK</a> main1和main2是指框架名稱
7.上頁下頁重新整理
<a href=”javascript:history.back()”>BACK</a>
<a href=”javascript:history.forward()”>NEXT</a>
<a href=”javascript:window.location.reload()”>Reload</a>
8.錯誤圖檔的替代圖
在網路上常常看到圖片顯示不出來的情形,尤其是連結他站的LOGO，這樣的情形就破壞整個版面的美觀,這裡教你如何使用代替圖檔，讓無法顯示的圖轉為你所設定的圖片來顯示
<script type=”text/javascript”>
var rimg = “logo.gif”;
function errorimg(x, y) {
if (y == null) {
x.src = rimg;
}
else {
x.src = y;
}
}
</script>
在你網頁內的圖檔標籤內加上 no4.gif” > 步驟一的var rImg = “logo.gif”就是設定替代圖檔
9.偵測解析度進入不同網頁
自動辨識瀏覽者解析度而進入不同的網頁
<script type=”text/javascript”>
<!–
var swidth=1024;
var sheight=768;
if (screen.width<swidth||screen.height<sheight)
{location.replace(“800.htm”);}
else{location.replace(“1024.htm”);}
//–>
</script>
800.htm和1024.htm就是自動辨識解析度進入的網頁
10.直接執行指定網頁(轉址)
設定進入此頁直接執行另一個網頁，就像轉址
<script type=”text/javascript”>
if(top.usrID == null) {
location = “home.html”
}
</script>
home.html改為你要指定轉向的網址
11.防止網頁顯示在框架
每個網站大部分都有LINK連結區，集合了網路上的好站或朋友的網站介紹，當然網站製作人都很歡迎你介紹，但是沒有人希望自己的網站是被連結在你網頁的框架中，開個新視窗連結他人的網站是一種禮貌喔！但是總有一些網路新鮮人不小心把你的網站連到他的框架，這時候你就只有自己做好防護措施，使用下方這個程式的網頁就不能放在框架裡了喔！〈適合首頁使用〉
<script type=”text/javascript”>
<!–
if(self != top) top.location.href =window.location.href;
//–>
</script>
12.預先讀取圖片的方法
在網頁頁面開啟之前先讓瀏覽器讀取預定的圖片
<script type=”text/javascript”>
<!–
Image1= new Image(100,50)
Image1.src = “img1.gif”
Image2 = new Image(100,50)
Image2.src = “img2.gif”
// –>
</script>
13.固定視窗大小
只要進入這網頁視窗就會自動顯示設定值的大小
<script type=”text/javascript”>
function changesize(){
window.resizeTo(430,300);
}
window.onload=changesize;
window.onresize=changesize;
</script>
(430,300)視窗寬.高
14.顯示在最上層的視窗
開多個視窗時.這視窗永遠顯示在每個視窗的最前面。
<script type=”text/javascript”>
<!–
function floating(){
self.window.focus();
setTimeout(“floating()”,100);
}
setTimeout(“floating()”,100);
// –>
</script>
15.隨不同解析度最大化瀏覽器視窗
填滿是指瀏覽器視窗,並非網頁內容
<script type=”text/javascript”>
<!–
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
// –>
</script>
16.瀏覽器中封鎖滑鼠右鍵
這是一個不能反白網頁內容的封鎖右鍵語法,也不會跳出右鍵功能,
但對於網頁防護並不是絕對,還是可以就由其他方式取得網頁內容,
不要過度使用而造成訪客的不便.
複製以下語法貼於body框框中
<body 語法貼這裡>
17.讓網址列網址不改變
一般我們首頁的名稱都要命名為index.htm或index.html,經由網址例如:
http://www.hsiu28.net/index.html
就不需要檔名直接用
http://www.hsiu28.net/
就能夠自動執行index.html這個檔案,所以我們將首頁index.html做成框架頁
讓所有網站內容都在這個框架中執行,網址就可以一直不變
複製以下語法存為index.html
<html><head>
<meta http-equiv=”Content-Type” c>
<title>web title</title>
</head>
<frameset framespacing=”0″ border=”0″ rows=”*” frameborder=”0″>
<frame name=”main” src=”home.html” scrolling=”auto”>
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
範例中home.html改為你要做為首頁畫面的網頁
18.防止網頁被另存html
藉由IE工具列上的另存新檔就可以將網頁存到電腦
這語法可以避免網頁在IE瀏覽器被另存新檔
<noscript><embed src=*.html></embed></noscript>
19.link之網站的專屬圖示
favicon.ico 就是圖示檔名
製作圖示建議把圖示畫大一點,能填滿32×32的格式
<link rel=”shortcut icon” href=”http://www.hsiu28.net/favicon.ico”>
發佈留言