完美的彈出窗口

鑰匙要點

只要可以正確地實現它們，就可以有效，無創地使用彈出窗口。常見的故障包括腳本，搜索引擎，可訪問性，站點管理工具，彈出式殺手以及阻止彈出窗口打開的選項的問題。
>創建一個完美的彈出窗口，請考慮使用可以放置在一些常見的JavaScript代碼中的函數。該功能可以從網站上的任何地方輕鬆調用，並且比編寫窗口更為可取。每次打開函數。該功能應處理焦點方面，評估彈出窗口的狀態，關閉彈出窗口並使用其新的維度重新打開。
>在彈出窗口本身中提供鏈接或按鈕很重要，以允許用戶關閉它。但是，如果用戶已禁用腳本，則應使用JavaScript將“關閉此窗口”鏈接寫入網頁，並檢查是否作為window.open（）方法的一部分打開窗口。如果是真正的彈出窗口，則將出現鏈接，並且CLOSS（）方法將起作用；如果它不是真正的彈出窗口，則不會出現鏈接。
• >

如果您相信雅各布·尼爾森（Jakob Neilsen）和他的支持者之類的人，沒有什麼比彈出窗口更邪惡的了。在許多方面，這是正確的。為什麼？好吧，我們將盡快列出原因，但是簡而言之，這是因為它們幾乎總是實施或根本不需要。本教程將表明，有了正確的想法，可以使用彈出窗口而不會讓任何人感到不安 - 尤其是瀏覽您的網站的人。

彈出窗口問題

帶有彈出窗口的常見故障是：

如果禁用了腳本，或者瀏覽器不支持JavaScript，則彈出窗口將不起作用
• >
搜索引擎無法遵循鏈接到彈出窗口（腳本元素總是忽略）
• >
彈出窗口顯示可訪問性問題 如果將目標頁面移動到網站的另一部分，則
• >
• >
許多人在打開的那一刻就有彈出式殺手在窗口 在Mozilla中，有一個選擇首先停止彈出窗口的選擇
• > ph。這是一個列表……您可能可以將自己的列表添加到此列表中。那麼，我們如何解決這些問題？
>腳本禁用

>在禁用腳本的情況下，彈出窗口無濟於事。那樣簡單。但是，如果您使用了標準，則不會出現這樣的問題。因此，而不是使用：

您可以使用：

<a href="#" onclick="window.open('file.htm');"> 

這樣，如果禁用了腳本，則標準鏈接仍然有效。 > 但是，也許有一個很好的理由讓您希望窗口在當前窗口的頂部打開。如果是這樣，只需添加一個類似的目標屬性：

<a href="#" onclick="window.open('file.htm');"> 

賓果遊戲。問題解決了。但是我們可以做更多的事情！

>

>搜索引擎

>在上面修訂的代碼後，搜索引擎可以遵循標準的HREF，因此這是我們問題列表中的另一個問題。

>可訪問性問題

>彈出窗口的最大故障是，它們將焦點從主瀏覽器窗口中移開，這可能令人不安。除了可訪問性外，他們還提出了一般的可用性問題。您多久看到有人啟動彈出窗口，然後無意中單擊啟動器窗口上，以為沒有發生任何事情，請再次單擊鏈接而無需結果？當然，窗口已經打開，但是現在在啟動器窗口下方，只向下移動到任務欄，然後從那裡選擇窗口將解決此問題。

訣竅是通知用戶該鏈接將在新窗口中打開。有多種方法可以解決這個問題：

• 將說明作為鏈接本身的一部分。 在標題屬性中添加一些說明
>
• 使用合適的圖標表示彈出窗口
這樣，如果丟失了焦點，則用戶可以建立連接，例如：

打開我的測試頁面（在彈出窗口中打開）

>

打開我的測試頁

> 要解決在主窗口上失去關注的問題，您可以使用JavaScript重新設置焦點。本文末尾出現了一個提出的腳本。

>

網站鏈接管理工具

如果您習慣於使用Dreamweaver或Content Management System等工具移動頁面，則希望保持鏈接。使用標準HREF，通常是（取決於您使用的工具），但是使用JavaScript，這不太可能。返回我們的代碼片刻：

上面的鏈接幾乎可以保持得很好。其中一半將 - HREF部分。但是onclick部分可能會被忽略。這是一個大問題。您可能會認為您的鏈接已更新，但是實際上，確實啟用JavaScript的人會發送到丟失的頁面。因此，您可能會發現您的代碼將更改為：

<a href="file.htm" onclick="window.open('file.htm');return false;">

>

>如果您要在啟動頁面上運行鏈接驗證器，則您的鏈接確實確實有效。那麼，我們如何解決這個問題？像這樣：

<a href="file.htm" onclick="window.open('file.htm'); <br>
return false;" target="newWin">

>只有一個鏈接可以維護，並且正確的HREF將用於窗口。很棒的 - 現在我們到了某個地方！

<a href="file.htm" onclick="window.open('file.htm');  <br>
return false;">

>

>彈出殺手/mozilla禁用彈出窗口

與禁用JavaScript的問題一樣，僅提供標準HREF意味著該鏈接仍然可以正常工作。現在，我們只需要解決哪個窗口的焦點……

>

完美的彈出腳本

>我們建議使用一個可以放置在一些常見的JavaScript代碼中的函數（就像我們對本網站一樣），並且可以輕鬆地從網站中的任何地方調用。這比每次打開窗口都更可取。除了URL外，您可能還需要包括高度和寬度等參數，以及選擇哪種類型的彈出樣式（取決於您定義的樣式）。

>

這是我推薦的代碼：

<a href="#" onclick="window.open('file.htm');"> 

函數中的附加代碼處理焦點方面。如果單擊調用此功能的鏈接，請單擊頁面上的彈出窗口，以使彈出窗口被隱藏，然後單擊另一個彈出鏈接，代碼評估彈出窗口的狀態，然後關閉彈出窗口並使用其新維度重新打開它。

調用您將使用以下代碼的函數：>

<a href="file.htm" onclick="window.open('file.htm');return false;">

或使用一些實際示例：

>這個 是我的彈出鏈接（控制台模式）

這 是我的彈出窗口（固定模式）
這 是我的（彈性模式）

注意：“返回false”部分有效地取消了HREF的默認操作，因此它不會打開彈出窗口和普通的HTML窗口 - 它將打開一個或另一個。在沒有JavaScript的情況下嘗試上述鏈接，允許您自己查看。

>

您還能要求什麼？好吧……這個蛋糕上有最後一塊錦上添花。

關閉彈出窗口

>

打開彈出窗口後，我們可能會依靠人們使用瀏覽器/操作系統控件來關閉新打開的窗口。
但是人們並不總是這樣做！因此，我們應該在彈出窗口本身中提供鏈接（或按鈕，如果您願意的話），以允許用戶關閉它。但是，我們假設我們的用戶已禁用腳本，並且彈出窗口是通過標準HREF路由打開的。您如此周到地提供的“關閉此窗口”鏈接將促使這樣的對話不是很友好：

要解決此問題，您應該使用JavaScript編寫指向網頁的關閉鏈接，並檢查是否作為window.open（）方法的一部分打開窗口。這樣，如果它是一個真正的彈出窗口，則將出現鏈接，並且Close（）方法將起作用；如果它不是真正的彈出窗口，則不會出現鏈接。

>

這是執行此操作的代碼：

>

<a href="file.htm" onclick="window.open('file.htm'); <br>
return false;" target="newWin">

再次嘗試鏈接，然後親自查看：

>這個 是我的彈出窗口（固定模式）

>

結論

>希望本教程已經證明彈出鏈接可以訪問，搜索引擎友好且無創。但是，即使您遵循所有這些建議，您仍然應該問自己是否真的需要打開一個新窗口。

>要注意的最後一點是，彈出窗口應該是人們選擇使用的東西，因此請勿使用窗口或窗口。這總是讓人煩惱……除非他們想購買X10相機或訪問“世界上最大的在線賭場”，但不知道，那就是！

以上是完美的彈出窗口的詳細內容。更多資訊請關注PHP中文網其他相關文章！