WEB標(biāo)準(zhǔn):target 屬性怎么用 JS 來控制?_Web標(biāo)準(zhǔn)教程
在HTML 4.0 Strict和XHTML 1.0 STRICT里不答應(yīng)在<a>標(biāo)簽里使用target屬性,這是一件令網(wǎng)頁設(shè)計(jì)者懊惱的事。在過渡的規(guī)范里還是答應(yīng)使用的。但通過一定的方法,我們可以解決這一問題。
HTMl4.0規(guī)范里拿掉了target屬性:但它添加了另外一個屬性:rel。這個屬性是用來指定包含鏈接的文檔和所鏈接文檔之間的關(guān)系的。規(guī)范里定義了其屬性值(如:next,previous,chapter,section)。在這些屬性里大多數(shù)是用來定義一個大文檔里各個小部分之間的關(guān)系的。事實(shí)上,規(guī)范里答應(yīng)開發(fā)人員自由的使用非標(biāo)準(zhǔn)屬性值做特定的運(yùn)用。
在這里,我們采用一個自定義值external用于rel屬性來標(biāo)記一個鏈接,用來新開一個窗口。
不符合最新Web標(biāo)準(zhǔn)的鏈接代碼:
<a href="document.html" target="_blank">external link</a>
運(yùn)用rel屬性:
<a href="document.html" rel="external">external link</a>
現(xiàn)在我們構(gòu)建了一個符合Web標(biāo)準(zhǔn)的新開窗口的鏈接,我們還需要運(yùn)用JavaScript是其實(shí)現(xiàn)新開窗口。腳本要實(shí)現(xiàn)的工作是當(dāng)網(wǎng)頁加載時,找到文檔里的所有那些我們定義為rel="external"的超鏈接。
首先我們要判定瀏覽器
if (!document.getElementsByTagName) return;
getElementsByTagName是DOM1標(biāo)準(zhǔn)里一個輕易使用的方法,且它被現(xiàn)在的大多數(shù)瀏覽器所支持,因?yàn)橐恍┡f的瀏覽器如Netscape 4和IE4不支持DOM1,所以我們必須通過判定這一方法是否存在來排除這些舊版本的瀏覽器。
下一步,我們通過getElementsByTagName方法取得文檔里所有的<a>標(biāo)簽:
var anchors = document.getElementsByTagName("a");
anchors被賦值為包含各個<a>標(biāo)簽的數(shù)組,現(xiàn)在我們必須遍歷各個<a>標(biāo)簽并且修改它:
for (var i=0; i < anchors.length; i ) {
var anchor = anchors;
找到要實(shí)現(xiàn)新開窗口的<a>標(biāo)簽
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
接下來,建立屬性值target并賦值"_target"
anchor.target = "_blank",
完整的代碼:
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i ) {
var anchor = anchors;
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;
- Web標(biāo)準(zhǔn):需要正確的使用H1~ H6標(biāo)簽
- 五個WEB標(biāo)準(zhǔn)中必須注意的地方
- 做到結(jié)構(gòu)(XHTML),表現(xiàn)(CSS),行為(JavaScript)的分離
- CSS標(biāo)準(zhǔn):HTML標(biāo)簽元素的關(guān)閉
- Web標(biāo)準(zhǔn)之路 勿使用W3C廢棄的元素
- CSS布局 聲明文檔類型描述(DTD)
- DIV CSS\讓搜索引擎蜘蛛不再累
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁
- XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)站
- DIV+CSS對SEO的幫助
- 淺析什么是Web標(biāo)準(zhǔn) 及其前景
- CSSer新手寄語:開始標(biāo)準(zhǔn)之路
Web標(biāo)準(zhǔn)教程Rss訂閱Div+Css教程搜索
Web標(biāo)準(zhǔn)教程推薦
- CSS標(biāo)準(zhǔn)系列用CSS制作“鼠標(biāo)經(jīng)過圖像”
- WEB2.0標(biāo)準(zhǔn)教程:第十一天 不用表格的菜單
- 學(xué)習(xí)網(wǎng)頁Web標(biāo)準(zhǔn)的五個步驟
- WEB標(biāo)準(zhǔn)教程第1天:選擇什么樣的DOCTYPE
- 修飾之美:CSS在表格邊框上的美學(xué)應(yīng)用
- CSS標(biāo)準(zhǔn)系列數(shù)據(jù)層與樣式層分離模式的管理
- 仿Office 2003 的工具條
- CSS網(wǎng)頁布局中語義和HTML頁面結(jié)構(gòu)
- CSS應(yīng)用常見問題大總結(jié)
- 定義標(biāo)題的最好方法
- 相關(guān)鏈接:
- 教程說明:
Web標(biāo)準(zhǔn)教程-WEB標(biāo)準(zhǔn):target 屬性怎么用 JS 來控制?
。