昔から存在するのに、あまり使われていないbaseタグですが、使い方を知り、熟知することで色々な使い方ができる事がわかります。
セキュリテイ対策として、きちんとソースコードに埋め込んでいる場合もあれば、ソースコードの簡略化のために行っている場合もあるようですが、ほとんどのサイトでは使われていないようです。
しかし、別に使わなかったからといって、SEOで結果に影響する訳ではなく、むしろフィッシングサイトと判断されてしまうケースの方が多いので、仕様を理解できないまま使うのは諸刃の剣となる可能性も高いです。
一番使える機能は、「WEBサイトのプレビュー画面」ではないでしょうか？
しかも、サーバーに保存せずにhtmlファイル単体で特定のドメインのWEBページが表示できてしまうという、特定業種の人にはとてもありがたい機能にもなりえます。
くれぐれも悪用しないように使ってくださいね。
他ドメインのサイトを簡単にプレビュー作成する方法
- 対象サイトのHTMLソースを取得
- テキストエディタで取得したHTMLソースをコピペしてhtmlファイルを作成。
→ファイル名は「***.html」としてローカルPCに保存。
- Headタグの開始直後に以下を挿入
< base href=“対象サイトのURLをそのまま記述”>
- このhtmlファイルをブラウザで開くと対象サイトがそのまま表示されます。
・画像やcssやjavascriptの外部パスなども対象サイトからそのまま取得され、ページ内で実行されるので、WEBページがそのまま実行されます。
【注意点】
・入力フォームなどのページで「送信ボタン」を押してデータPOSTをする場合、ページ遷移すると、元の対象ページに移動してしまいます。
・対象ドメインのサーバーで処理されるような機能がある場合はシステムエラーになり実行されない場合があります。
・ブラウザのアドレスバーでドメインを確認するようなセキュリティがある場合は、金融サイトなどで行うと、フィッシングサイトとして認識される場合があるので、要注意すること。
・プロトコルによるアクセスエラーに注意
（httpとhttpsなどは全て統一する必要がある。）
WEBページをマイグレーションするようなサービスを構築した場合、このbaseタグ挿入するだけで、簡単にページプレビューを作成する事ができる。
さらに、このソースコードに、独自で作成したjavascriptなどを追加する事で、ページに機能追加を行う事が可能になる。
プロトコルの注意点について、httpとhttpsの違いで読み込めない場合があるので、コンソールを見ながら読み込みエラーを無くすように心がけましょう。
baseタグの簡単知識
base | chronology drive
Baseタグは、ページに記載されたリンク先URLの基準となるURLや、基準となるターゲットウインドウ（ターゲットフレーム）を指定するタグです。
HTMLソース内で外部指定するurlを簡略化する事が可能になり、スマートなソースコード記述ができるようになる。
javascriptで切り替えたらどうなるのか？
Baseタグは、javascriptを使って表示しているページで動的に操作することも可能です。
ただし、注意点としては、imgタグや、scriptタグ、cssタグなどの読み込みタイミングでのbaseタグ記述が優先されるため、読み込み完了した物を再読み込みする場合は、都度対象の読み込みURLに関するタグのsrcやhrefに対して再読み込み処理を行う必要があります。
Javascriptでbaseタグの属性を変更する場合（baseタグの追加や削除）は、createElementやremoveChildを使うことで実行することができます。
また、base属性を切り替えた時に、imgタグなどで、今現在どのurlを参照しているかを確認する場合、以下の命令で確認できます。
target-element.src
→今現在設定されているbaseタグの情報が取得できます。
target-element.currentSrc
→読み込み完了後にどのURLを参照しているかが取得できます。
※ただし、document.body.onloadの後でないと取得できないようです。
どうやら、だいたいのブラウザで対応しているようなので、「currentSrc」使えますね。
おまけ、読み込みタグの再読み込み処理
最後に、baseタグを切り替えた時に、任意のタグの読み込み情報を再読み込みする方法を書いておきます。
// baseタグを切り替えた直後に、ページ内のimgタグ全てを再読み込みする
var e = document.images;
for(var i=0; i<e .length; i++){
var src = e[i].getAttribute("src");
e[i].src = src + "?"+ (+new Date());
}
解説
imgタグのsrc属性に任意のタイムスタンプを付与してキャッシュ回避をすると同時に、srcを切り替えた事で更新読み込みが開始されます。
注意点としては、すでにクエリが付いているURLを指定している場合は、"?"を"&"に切り替えて使ってください。
0 件のコメント:
コメントを投稿