Help us understand the problem. What is going on with this article?

HTMLのbaseタグをつけたり消したりしてみたときの挙動

More than 5 years have passed since last update.

baseタグというものがあります。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/base

HTML Base 要素 () は、ドキュメント内に含まれるすべての相対 URL の基点となる URL を指定します。

というもので、例えば

<base href="http://www.google.com" />
<img src="/sample.jpg" />

とあった場合、この画像のsrcは "http://www.google.com/sample.jpg" となります。

複数書く

このタグは先勝で、複数書いた場合は最初の href が有効になります。

使用補足: 複数の 要素が指定された場合、最初の href と最初の target の値が使用され、他はすべて無視されます。

途中で書く

以下のようなJSでごにょごにょっと書きだした場合

  • localhostで立ち上げています
  • 簡単な実験のためdocument.writeを使っています
(function(){
  document.write("<img src='/1.jpg' />");
  document.write("<base href='http://www.google.com' />");
  document.write("<img src='/2.jpg' />");
})();

とすると、http://localhost/1.jpghttp://www.google.com/2.jpg にリクエストが行きます。

途中で消す

(function(){
  document.write("<img src='/1.jpg' />");
  document.write("<base href='http://www.google.com' />");
  document.write("<img src='/2.jpg' />");
  setTimeout(function(){
    document.querySelector("base").remove();
    var img = document.createElement("img");
    img.setAttribute("src", "/3.jpg");
    document.body.appendChild(img);
  }, 1000)
})();

とすると、http://localhost/1.jpghttp://www.google.com/2.jpg とした後に、 http://localhost/3.jpg にリクエストが行きます!

消すとbaseが無くなります!

つまりこれを繰り返すと、同じパスだけど、必要なタイミングで必要な base を適用してリクエストが出来る!

まとめ

普通の生活にはなんの役にもたたないと思います

muddydixon
JavaScript (HTML5, Node, jQuery) Perl R Hadoop MongoDB DataMining MachineLearning InfoGraphics
http://muddydixon.hatenablog.com
tver-technologies
Innovate TVision, Designing Value / テレビ・動画配信の可能性を切り拓き、新しい価値をデザインしていきます。
https://www.tver-tech.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away