web開發的一些問題

1，document.getelementbyid方法只能獲取到一個物件，即使有多個同名的物件，也只取第一個具有該名稱的物件，例如在一個form（名稱為myform）中，有三個id="mycheckbox"的核取方塊，那麼使用document.getelementbyid("mycheckbox")，返回的是第一個checkbox物件，而不是返回一個陣列，如果使用document.myform.mycheckbox則返回一個陣列。

2，使用showmodaldialog開啟一個頁面，則在這個頁面中，對於任何連結和任何表單提交，都會在新的視窗中執行，即使你在連結或form中指定了target="_self"也是沒有用的。例如使用showmodaldialog開啟一個test.html，在該頁面有一段程式碼
開啟
如果點選該連結，那麼將會在新視窗中開啟test2.html，至少在ie中是這樣的，那麼是不是就沒有辦法解決了呢？不是的，我們可以透過在彈出的頁面的head中加入下面的程式碼來解決這個問題：




3，在一個頁面含有某個iframe，其id="myframe" name="myframe"，此時使用document.getelementbyid("myframe")取到的是iframe標籤物件，透過該物件可以獲取iframe的各個屬性，例如src、frameborder、style等等，但是不能獲取到iframe所包含的子頁面的各個物件。如果使用document.frames("myframe")取到的是iframe元件物件，透過該物件可以獲取到iframe所包含的頁面的子頁面的各個物件，例如子頁面的window物件，但是不能獲得iframe標籤得各個屬性，例如上面說到的src等等。請參看如下類似程式碼：
1.html




2.html

使用者名稱：

4，在table中，如果在table中加入border="1" bordercolor="red"，那麼table中所有單元格都會加上厚度為1的紅色邊框，但是如果在table中加入css style="border-width:1;border-color:red;border-style:solid" 那麼只會在整個table的最外面加上厚度為1的紅色邊框，分別如下圖所示：

當然第一個出現了雙邊框，這是因為沒有設定cellspacing的緣故，只要在table中設計cellspacing="0"，那麼就變為單邊框了。

5，許多時候我們需要在頁面載入時能夠透過javascript去動態操作html中的一些物件，對於這些操作我們最好是在body中定義onload操作，然後在該操作中去完成這些任務，儘量避免在html中嵌入script執行程式碼，因為對於比較大的頁面，當這些指令碼執行的時候，頁面往往還沒有載入完畢，因此許多頁面物件還沒有被生成，此時動態去改變很可能會報異常。

6，有時候我們需要在iframe子頁面中呼叫父頁面的javascript函式，例如在父視窗中定義了一個函式如下：



//...


那麼在iframe子頁面中可以透過parent.loadimage()來實現呼叫，這也說明使用者在頁面定義的所有javascript函式都屬於window物件之下。那麼在父視窗如何呼叫子視窗中的函式呢，應該很簡單了，就是獲得子視窗物件，然後呼叫子視窗物件的window物件下的這些函式即可，例如iframe的name為myframe，在子視窗定義了一個函式getusername，那麼父視窗中的呼叫方式為document.frames("myframe").getusername();另外對於父視窗呼叫子視窗中的方法，還要注意一個問題，就是子視窗的載入有時候會比較慢，如果子視窗正在載入，那麼此時它的各種頁面物件都不存在，那麼當在父視窗呼叫子視窗的方法時，為了保險可以使用藉助settimeout來實現非同步呼叫，即透過settimeout指定一定時間之後（例如100ms），再執行呼叫，呼叫執行總是判斷子視窗頁面是否載入完畢，如果沒有載入完畢，則繼續使用settimeout方法，迴圈往復直到子視窗被完全載入，然後執行子視窗的函式呼叫。既然這裡解釋了視窗間的非同步呼叫，後面就不專門解釋了。

7，在一個網頁中如何最小化視窗，當然你可能會說，網頁的右上角不是有最小化、最大化和關閉三個按鈕嗎，當然了這裡說這個問題是指，如果不點選網頁右上角的最小化，如何實現網頁的最小化操作，例如有些專案中，使用者需要辦公介面是全屏化的，這意味著網頁自己提供的許多操作都不可見，更不用說去操作了。在網路上我們搜尋最小化的解決方式，我們會發現千篇一律的使用如下的方式實現：


在win98和windows2000中這個方式可能是可以的，但是在windows xp中卻是不再支援了，不僅如此在windows xp中對javascript不少函式做了限制。那麼在xp中如何實現最小化呢，一個可以實現的方式就是自己寫一個activex控制元件，這個是在專案中證明可以實現的。（不要認為activex控制元件很難寫，也不要以為activex控制元件使用者不接受，在實際的專案中如果使用者使用的都是ie，那麼使用者一般是會接受的，當然這裡的專案最好是內網辦公專案，對於公網專案來說，使用者接不接受就很難說了）

8，注意td中nowrap的使用，這個屬性是很有用的，例如如果一個td中含有多張圖片，那麼如果不加入nowrap，那麼很可能這些圖片會由於其它的td的擠壓而產生細微的上下錯位，這表現的頁面上就是某處出現了一條橫向的細縫。這一點很重要，頁面中許多非常奇怪的現象都與此有關。

9，對於showmodaldialog彈出的頁面，不能使用右鍵選單，也不支援f5和ctrl+r重新整理，如果此時修改彈出頁面的內容，那麼必須關閉該視窗，然後重新彈出才可以。另外，對於許多web伺服器，由於伺服器都設定有快取，如果修改了彈出頁面的內容，那麼許多時候只是關閉彈出頁面還是不夠的，往往還需要關閉彈出該頁面的那個頁面才可以。在這裡多說一句，web開發許多奇怪的頁面現象都和web伺服器的快取有著很大的關係，因此出現問題時考慮一下是否是由於伺服器的快取所致。

10，我們喜歡在form中定義onsubmit操作，主要是為了在表單提交之前可以做一些有意義的操作，例如檢查輸入域的有效性等等，但是一定要注意，如果我們透過點選該form中的submit按鈕（type=submit或type=image）提交表單，那麼該onsubmit操作會被執行，但是如果透過document.formname.submit()提交表單，那麼此onsubmit操作將不被執行。

11，許多時候我們修改了頁面的內容，但是我們重新整理頁面或重新開啟該頁面，卻看不到修改的效果，除了前面提到過的showmodaldialog和快取的情況要考慮外，還要檢查一下是否改對了地方，即你修改的那個頁面是否是伺服器上的那個頁面，有可能你修改了其它地方的一個頁面，如果不是這個原因，那麼再進行其它方面的檢查。

12，在沒有系統規劃好之前，請不要在css中定義html標籤的統一行為，即下面的形式：

因為一但定義了這些標籤的屬性，那麼這將會影響頁面中所有的這些標籤屬性，尤其在一些公用的css檔案中，儘量不要定義html標籤的統一行為。當然如果經過了系統的良好的規劃，那麼這樣做將是非常好的，只是在國內在css上經過良好規劃的並不多，因此雖然我們見到許多專案和產品中對html標籤做了許多css的定義，但是真正起到作用的並不多。

13，在html標籤中有許多屬性的名稱都是複合詞，例如bordercolor、frameborder、readonly等等，注意這些複合詞在html的書寫，一般來說我們在html標籤中寫為bordercolor和bordercolor，各個瀏覽器的解析都會透過，但是我們在使用javascriopt引用這些屬性時卻需要注意了，一定使用正確的屬性名稱，嚴格來說，對於複合詞而言，除了第一個有意義的詞之外，其它任何有意義的詞的首字母都要大寫，例如對於上面列出的三個屬性的引用，一定要使用bordercolor、frameborder、readonly的形式。



14，我們知道當使用瀏覽器的選單“檢視”->“文字大小”來改變文字的顯示時（或者有些瀏覽器也可以使用ctrl+滾輪鍵），網頁中的文字的字號會發生相應的變化，如果我們在網頁中的文字塊中定義了style="font-size:10pt"，那麼這些文字塊中的文字的大小將是固定的了（注意在標籤定義size屬性是不能固定字號的），我想這一點多數人都應該知道的。但是我們使用中有時會出現一種非常奇怪的現象，例如下面的一段程式碼：

這是上面 這是下面

我們看一下在字號顯示“最大”和“最小”下的差別：

從上圖我們可以看到字號我們是固定住了，但是table的高度卻會隨著檢視方式的不同而發生變化，這是為什麼呢？原因就在於td當中的那個
，我們知道
是表示段內換行，但是要注意在網頁中所謂的行也是有一定的預設高度的，而且這個高度隨著檢視方式的不同而發生相應的變化，因此如果我們想固定上面table的高度不發生變化，有下面兩種方式：
方式一：在table標籤中加入字號限制例如 方式二：在
中加入字號限制例如
...
如果你是一個web開發人員，你可以試著使用ctrl+滾輪鍵改變網頁檢視文字的大小，你會發現不少頁面都存在這個問題的。

15，網頁中定位物件的方式有許多種，下面先簡單總結一下，以後再專門寫這個方面的文章的：
1）頁面內通用定位方式（這些定位方式適用於後面其它元素的定位）
document.getelementbyid(objid);//透過物件的id獲取物件，這個是各個瀏覽器都支援的，返回一個物件
document.getelementsbyname(objname);//透過物件的name獲取物件，這個是各個瀏覽器都支援的，返回一個陣列
document.getelementsbytagname(tagname);//透過標籤名稱獲取物件，這個是各個瀏覽器都支援的，返回一個陣列
document.all.objid;//透過物件id獲取物件，這個是ie支援的，返回一個物件
document.all(objid);//透過物件id獲取物件，這個是ie支援的，返回一個物件
document.layers.objid;//透過物件id獲取物件，這是netscape支援的，返回一個物件
document.layers(objid);//透過物件id獲取物件，這是netscape支援的，返回一個物件
window.objname;//透過物件名稱獲取物件，至少在ie中如此
objname;//透過物件名稱獲取物件，至少在ie中如此
2）頁面內集合元素的定位方式
我們知道在頁面中有許多集合，例如form、frame、image等等，引用這些集合中某個物件的方式為，舉其中一個為例，其它都差不多，以form為例：
document.formname;//透過表單name獲取表單物件
document.forms[index];//透過索引獲取表單物件，瀏覽器會按順序將頁面中所有的表單集合城陣列，可以透過下標引用
document.forms(formname);//透過表單name獲取表單物件
3）定位子視窗的方式（定位子視窗物件，不是標籤物件，見前面3中的說明）
子視窗是指頁面中frame或iframe視窗，定位方式為：
document.frames[index];//索引定位方式
document.frames(framename);//透過名稱定位
window.framename;//透過名稱定位
framename;//直接透過名稱來定位
4）在子定位父視窗的方式
透過關鍵字parent來引用即可，同理parent.parent則表示父父視窗，top則表示最上層視窗。
5）原視窗定位open彈出視窗的方式，例如下面程式碼：
window.open("test.html");
這裡我們要知道window.open將會返回一個彈出視窗的控制程式碼，即可以如下：
var owin=window.open("test.html");
owin即程式碼彈出視窗物件，透過改物件可以引用到彈出視窗的各個物件。
6）原視窗定位showmodaldialog彈出視窗的方式，例如：
window.showmodaldialog("test.html");
注意showmodaldialog與open不同，open彈出視窗後，window.open後面的程式碼可以繼續執行，而showmodaldialog彈出視窗後，原頁面被阻塞，即window.showmodaldialog後面的程式碼不被執行，直到使用者關閉了彈出視窗才會繼續往下執行，但這時因為已經關閉了彈出視窗，所以已經無法再對該視窗進行引用。
7）open彈出的視窗對原視窗的定位方式，這個我們一般都知道，在彈出視窗中使用opener即可。
8）showmodaldialog彈出的視窗對原視窗的定位方式，這個不是使用opener，而應該在彈出視窗中使用parent。

16，編寫頁面程式碼儘量使用標準的html、css和javascript，不要以為只要在ie上透過就可以了，要注意最近瀏覽器市場已經開始發生變化了，不知道你是否聽說過firefox2.0，它的使用者量已經不在ie之下了，至少你的程式碼要在ie和firefox上都透過才可以，另外現在linux越來越吃香，保不準幾年後我們的許多客戶都開始使用linux，到那個時候，我們將不得不對原來已經完成的專案進行維護，與其這樣的後果，還不如從現在開始就使用標準為好，不要認為跨瀏覽器是很虛的話題，覺得沒有必要，要知道這已經不是幾年前了，現在形式和市場都在發生變化，我們的思想也該變一變了。

17，我們的產品或oa系統往往會有許多模組，例如使用者管理、發文流程、物品管理等等，我們在為這些模組命名時往往都是不太講究的，沒有注意名字的結構、字數等的統一，例如在個人事務模組下面有三個子模組，名稱分別如下：待辦事項、已辦事項，維護個人資訊。對於字數而言我們往往不會苛求太多，但是對於詞的結構，我們還是要講究的，例如上面的三個模組，前兩個是名詞結構，而後一個是謂詞結構（動賓結構），這是不太妥當的，也許你覺得這有些吹毛求疵，當然大多數專案中不會要求這麼嚴格，但是有些客戶的確會有這樣的要求，另外對我們自己而言，這也體現了我們做事認真、一絲不苟的品格和態度。

18，圖示與文字的配比要合適，這不僅要求圖示能夠正確顯示文字的意思，而且還要求圖示不能蓋過文字的顯示與含義，即圖示太顯眼而文字無足輕重的情況需要避免，例如下面的情況就是不太合適的：
使用者管理
之所以不合適，主要是因為圖示的含義與使用者管理關係不大，圖示的含義更接近“xx編輯”的意思，和使用者管理基本沒有什麼聯絡。

19，在使用者登入和表單處理頁面，我們要處理使用者按enter鍵的情況，即使用者按enter鍵也要觸發提交事件，不要只有使用者點選“登入”或“提交”按鈕才觸發提交操作。

20，如果我們在頁面中使用標籤，那麼預設情況，當滑鼠移到該連結時，滑鼠自動會變為手的形狀，許多時候我們希望滑鼠移動到其它非連結的區域，也希望滑鼠變為手的形狀，我們一般的處理方式為在該區域的style中加入cursor屬性，如下：
下一頁
或者使用：
下一頁
但是要注意，只有在ie中才支援cursor:hand，在firefox2.0中的cursor中是沒有hand的，像wait、help等都是支援的，另外firefox中也不支援cursor:url方式。

21，我們有時想透過javascript進行跨域頁面的呼叫，不過出於安全性的考慮，各個瀏覽器一般都是不支援的，例如下面的程式碼：

使用settimeout是為了可以讓iframe子頁面可以載入完畢，上面的呼叫會報安全性警告，例如在ie如下：


那麼是不是說只要是跨域就能不能進行javascript訪問了呢？不是的，一種比較常用的辦法就是設定document.domain屬性，這種方式的描述如下：
假設有兩個頁面
test1.html 所在域：aaa.maindomain.com 訪問協議：http 埠：8080
test2.html 所在域：bbb.maindomain.com 訪問協議：http 埠：8080
滿足上面條件的兩個頁面test1.html、test2.html是可以透過javascript相互訪問的，上面的條件即為兩個頁面位於同一個基礎域（例如上面同為maindomain.com），遵循同一個訪問協議和埠（例如上面同為http 8080）。只要在這樣的兩個頁面中都設定document.domain為所在基礎域名，就可以相互呼叫了，例如：
test1.html 所在域為aaa.mydomain.com


test2.html 所在域為bbb.mydomain.com

...
這樣一來，test1.html的呼叫就是可以的了。一般來說跨域呼叫的場景發生在集團型企業專案或多機構的政務專案中，而對於這種型別的專案，它們的基礎域基本上是相同的，只是三級域名不同，因此可以使用上面的方式來進行跨域呼叫。

22，你會頁面中的javascript除錯嗎？也許你還不會使用ie或firefox提供的頁面偵錯程式或外掛，那麼沒有關係，至少你懂得一種最基本的除錯：alert除錯，不要認為這是一種很土或很傻的方式，很多時候這種方式都很非常有用的，對於一段很長的javascrip程式碼，從頭到尾加入幾個alert，那麼立即就能定位錯誤的大概位置，當然使用偵錯程式的斷點也可以很快定位，只是說alert也是一種不錯的方式。當然還是希望你能夠掌握更為高階的偵錯程式的使用，畢竟偵錯程式帶給我的功能更強大。

23，我們許多時候編寫完網頁之後，發現最終的顯示效果和我們想象的不太一樣，這有些時候是由於瀏覽器的不同造成的，但除此之外，我們如何具體定位到底是頁面的哪塊程式碼導致不太理想的頁面效果呢？當然你可能會使用dreamweaver或frontpage開啟出問題的頁面，然後查詢原因，但是這些所見即所得的網頁設計器，並非我們想象的那麼完美，例如明明在設計器種預覽很好的效果，到了真實環境中頁面竟然出現了錯位等等，這裡和你介紹一種非常不錯的css的除錯方式，這裡就不具體說了，請參看我新寫過的一篇文章【css在html中的除錯作用 】

24，網頁列印我們都知道可以呼叫window.print函式，那麼如果想列印iframe子視窗中頁面呢，如果你只是獲得子視窗物件，然後呼叫子視窗物件的print方法，此時印表機列印出卻不是子視窗頁面的內容，而是父視窗頁面自身，為什麼會這樣呢？原來（至少在ie中如此）在父頁面呼叫子視窗的print函式時，因為此時焦點還在父視窗之中，所以印表機此時會將獲得焦點的視窗進行列印，我們在列印子視窗之前，只需做一件事即可完成對子視窗的列印，如下程式碼：









25，網頁切圖許多人都習慣於網頁三劍客的配合使用，網頁三劍客就是網頁開發者都熟悉的dreamweaver、fireworks和flash，一般我們使用使用flash或fireworks將動畫或圖切分後輸出成為html頁面，然後透過dreamweaver編輯輸出後的頁面，這是我們網頁切圖常用的配合方式，但是透過使用比較發現，在圖片的切分方面，使用photoshop要好於fireworks，photoshop不僅定位更加精確，而且由於自身是平面設計的標準，因此它提供了許多圖片編輯的其它功能，這要比fireworks強大得多。目前專業的網頁設計師都在開始或一直使用photoshop進行網頁設計並切分後輸出成為html頁面。如果你是三劍客的愛好者也沒有關係，你可以使用一下看看效果如何，總之我從2000年就開始使用三劍客，現在才逐漸認識到photoshop已經不僅僅是平面設計的標準了。

26，在javascript中有一個方法可以列出當前物件所支援的所有屬性、集合和事件，透過使用in關鍵字來實現，如下樣例程式碼：
var str="";
for(var i in document){
str+=i+"n";
}
alert("document's all attributes:"+str);

27，在一個名稱為myform的表單中，含有一個名稱為mychckbox的核取方塊，那麼document.myform.mycheckbox所取到的是那個核取方塊物件，那麼此時呼叫document.myform.mycheckbox.length是錯誤的，如果該表單中含有多個名稱為mycheckbox的核取方塊，那麼document.myform.mycheckbox返回的是一個陣列，此時呼叫document.myform.mycheckbox.length就是正確的。單獨說這個問題，可能感覺比較簡單，但是在實際應用中我們經常會犯與此相關的錯誤，如下圖所示：

上圖是我們在應用中經常遇到的“增、刪、改”的邏輯，我們在其中經常會對核取方塊做操作，經常會使用類似document.myform.mycheckbox.length的方式，一般情況不會報錯，這主要是因為在我們的列表中一般來說都不會只有一條記錄，但是當列表中只有一條記錄的時候（儘管這種時候不常見），這樣引用就會報錯，因為此時document.myform.mycheckbox返回的不是一個陣列，則對length的引用就沒有意義了，這種錯誤說起來很容易，但是在程式設計時往往就會忽略，因此在程式設計時我們建議如下方式：
if(document.myform.mycheckbox.length){
//...
}else{
//...
}

28，在ie中有一個很特別的css語法，如果你聽說過，那說明你的積累真是太豐富了！在css中有一種給漢語注音的語法，如下所示：

你知道這個語法嗎？ni zhi dao zhe ge yu fa ma

不知道bu zhi dao

你執行這段程式碼看看什麼效果（要在ie中執行），我這裡效果如下：


29，我們專案中經常會遇到頁面列印的需求，許多時候使用者需要只列印頁面某一部分，如果直接呼叫window.print則列印的是整個網頁的內容。解決辦法不外乎兩種，第一種方式是將整個頁面分為幾個部分，將需要列印的部分放在其中的一個部分，然後定義onbeforeprint和onafterprint兩個操作，即列印之前將不要列印的部分隱藏，列印之後將隱藏的部分顯示，類似程式碼如下：





第二種方式是將需要列印的部分放到iframe之中，然後將焦點移到子視窗，然後呼叫子視窗的print方法即可。

30，javascript中的陣列和我們一般的程式語言中的陣列是不太一樣，一般語言中陣列的長度是固定的，有些語言中陣列中的資料型別也要求是一樣的，但是javascript陣列卻不受這些限制，在javascript中陣列基本上是沒有長度限制的，而且型別也沒有限制，例如下面的一些使用方法：
var arr=new array();
arr[1000]="ok";
arr[300]=255;
arr[200]=new date();
var date=arr[200];
alert(date.gettime());
因為陣列的這種機制，我們可以使用陣列實現許多資料結構，例如列表、哈西表等等。

31，對於xml的處理一般情況下都是在伺服器端處理的，例如在java中有w3c、jdom、xpath等許多xml的解析器，但是現在許多時候我們需要在瀏覽器端處理xml字串，目前在ie和netscape中都有針對xml字串的解析，如果你喜歡使用，也沒有什麼關係，不過對於java程式設計師，我給你介紹一個完全按照w3c document api實現的xml解析器，相信你會非常喜歡的，因為完全是java的風格，請從 下載jsjava0.91，在其中的src/jsorg/w3c/dom下有xml各個物件的實現，在頁面中只需引用其中的xmlp.js和i18n.js即可，具體使用可以參考裡面的例子：位於下載包的examples/xmlparser/xmlw3cparser下面，也可以直接訪問： 檢視例子。

32，一段文字的首行文字縮排兩個漢字，這是中文段落的格式要求，我們可以透過在首行加入多個 來實現，不過還是建議使用css的標準屬性text-indent，例如下面的程式碼：

這是一段文字，請注意它的格式，

你看到了什麼效果？如果你看到首行

縮排了，那麼說明起作用了。

顯示效果如下：


33，在javascript中字串的替換函式為replace(regexp, newsubstr)，其中第一個引數是一個正規表示式，但是我們在實際使用中，往往習慣使用為一個字串，這雖然不會報錯，但是得到的結果往往是不正確的，例如下面的例子：
var str=“ abbbbacc”;
var rs=str.replace(“a”,”0”);
(a)0bbbbacc (b)0bbbb0cc
正確答案是a，當然a可能不是你想要的結果，你想要的結果是字串中所有的“a”都被替換為“0”，可是上面的使用方式只能將第一個“a”替換為“0”，正確的使用方式，在第一個引數中輸入一個正規表示式，如下所示：
var str=“ abbbbacc”;
var rs=str.replace(“/a/g”,”0”);//注意如果第一個引數為/a/，結果也是不正確的。
(a)0bbbbacc (b)0bbbb0cc
這樣的話答案就是b了，如果你不明白/a/g是什麼意思，那麼你就需要對javascript的正規表示式好好學習了，具體可以參看我以前寫過的一篇文章：http://blog.csdn.net/eye_of_back/archive/2006/07/14/922667.aspx

34，無論你使用的是asp，還是php，或者jsp，都不建議在頁面程式碼中夾雜著大量的業務邏輯程式碼。我們應該將業務邏輯程式碼封裝到應用伺服器層或者說業務層，web端只是進行呼叫。在jsp和php中我們可以將業務邏輯封裝到bo（業務物件）中，由於支援類、介面等一套物件導向的機制，使得這種封裝顯得很容易，對於asp，由於asp.net和c#的興起，使得它對業務封裝也變得相當方便。雖然我們都懂得伺服器的三層架構，但是我們發現許多的專案之中，開發人員仍然在頁面中直接編寫業務邏輯，甚至直接訪問資料庫，面對這種情況，不能不說我們的專案管理是存在很大的問題的，我們的專案經理和程式設計師們，我們應該好好反思一下了。

35，有些時候我們在標籤的href中直接加入javascript程式碼，透過window.open來開啟一個自己可以控制許多屬性的視窗，例如下面的程式碼：
開啟google
當我們點選連結後，確實彈出了google的頁面，但同時原頁面卻變為了下面的樣子：

這種情況相信有些人遇到過，解決方式如下：
開啟google
但是為什麼前面的那種方式就會出現那種情況呢，其實只要做個簡單實驗就會明白了，你執行一下下面的程式碼，點選連結看看會出現什麼結果：
開啟google
實驗後你會發現，點選連結後頁面出現的結果與上面那種結果相同，然後你再實驗一下下面的程式碼：
開啟google
點選連結後，你會發現頁面中會顯示test字樣。可見對於類似
點選
的程式碼，如果js程式碼執行完畢後返回一個物件，那麼頁面內容會被沖掉，然後將該物件的描述輸出到頁面中，我們知道window.open方法返回的是彈出的頁面的視窗物件（window），因此javascript:window.open將會在彈出一個視窗的同時，原頁面會沖掉原有內容並將返回的window物件輸出到原頁面中。如果在window.open後面加入window.opener=null;window.close()，則彈出視窗後，返回給原頁面的物件為空，則原頁面不執行任何其它操作