ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript を使用して link_Experience 交換のターゲット属性のコードを制御します

JavaScript を使用して link_Experience 交換のターゲット属性のコードを制御します

WBOY
WBOYオリジナル
2016-05-16 12:06:561544ブラウズ

HTML 4.0 Strict および XHTML 1.0 STRICT では、 タグ内での target 属性の使用が許可されておらず、これは Web デザイナーにとってイライラすることですが、移行仕様ではまだ許可されています。問題は解決できます。

target 属性は HTMl4.0 仕様から削除されました。ただし、別の属性 rel が追加されました。この属性は、リンクを含むドキュメントとリンクされたドキュメントの間の関係を指定するために使用されます。リレーショナル。その属性値 (次、前、章、セクションなど) は仕様で定義されています。これらの属性のほとんどは、大きな文書内の小さな部分間の関係を定義するために使用されます。実際、仕様では許可されています。開発者は、特定のアプリケーションに対して標準以外の属性値を自由に使用できます。

ここでは、rel 属性の外部のカスタム値を使用して、新しいウィンドウを開くために使用されるリンクをマークします。

最新の Web 標準に準拠していないリンク コード:
外部リンク
rel 属性を使用します:
外部リンク
Web 標準に準拠した新しいウィンドウへのリンクを構築したので、JavaScript を使用して外部リンクを実装する必要もあります。新しいウィンドウ。スクリプトを実装する必要があります。この仕事は、Web ページの読み込み時に、rel="external" として定義したドキュメント内のすべてのハイパーリンクを検索することです。

まず、ブラウザを決定する必要があります。
>if (!document.getElementsByTagName) return ;
getElementsByTagName は DOM1 標準の使いやすいメソッドであり、現在ほとんどのブラウザでサポートされています。Netscape 4 や IE4 などの一部の古いブラウザは DOM1 をサポートしていないためです。 、このメソッドを決定する必要があります。これらの古いバージョンのブラウザを除外する方法は存在しますか?

次のステップでは、getElementsByTagName メソッドを通じてドキュメント内のすべての タグを取得します:
varアンカー = document。 getElementsByTagName("a"); anchors は、各
タグを含む配列として割り当てられます。ここで、各 タグを反復処理して、次のように変更する必要があります。
for (var i=0; i varアンカー = アンカー;
}
タグを見つけて新しいウィンドウを実装します
if (anchor.getAttribute("href") &&アンカー.getAttribute( "rel") == "external" )
次に、属性値ターゲットを作成し、値 "_target" を割り当てます:
anchor.target = "_blank";
完全なコード:


関数 externalLinks() {
if (!document.getElementsByTagName)
return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i var anchor = anchors;
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。