CODEWITHSUNDEEP
javascriptjqueryhtml
GURURAJ DHARANI
GURURAJ DHARANI

Reputation: 468

How to use <base> tag in html5 for specific anchor tags only

I have one base tag in head and there are two different anchor tags as follows

<!DOCTYPE html>
<html lang="en">
<head>
  <base href="https://www.youtube.com"/>
</head>
<body>
  <iframe src="/embed/xDMP3i36naA?autoplay=1" frameborder="0" allowfullscreen></iframe>
  <img src="img/1.png" alt="" class="img-responsive">
</body>

And i want to use the url in the base tag for a specific anchor tag, how do i do that ?

Thanks,

Upvotes: 4

Views: 1543

Answers (2)

KAD
KAD

Reputation: 11122

If you want this for a specific anchor tag only it is not possible, you can use as a workaround for that such as giving the specific anchors a class and creating a javascript function that loops through these anchors on document load, update their href attributes and prepend the base URL specifcally.

Using the HTML tag applies to all the website not to specific anchors:

The base tag provides base location from which links on a page should be made. Relative links within a document (such as <a href="someplace.html"… or <img src="someimage.jpg"… ) will become relative to the URL specified by the base element.

UPDATE

Below is a non-tested example, knowing that the base tag shall be removed:

    var specificBaseURL = 'http://www.example.com/';

    $(document).ready(function(){

        $(".specific_anchor").each(function(){

          $(this).attr("href", specificBaseURL + $(this).attr("href"));

        }); 
    });

HTML: 

 <a class="specific_anchor" href="path1/">...</a>
   <a href="non/specific/path2">...</a>
   <a class="specific_anchor" href="path3/">...</a>

Upvotes: 2

Zac Collier
Zac Collier

Reputation: 160

This article should help clarify: http://www.htmldog.com/references/html/tags/base/

In theory, you would just trim your iframe's src property accordingly:

<!DOCTYPE html>
<html lang="en">
<head>
  <base href="https://www.youtube.com"/>
</head>
<body>
  <iframe src="embed/xDMP3i36naA?autoplay=1" frameborder="0" allowfullscreen></iframe>
  <img src="img/1.png" alt="" class="img-responsive">
</body>

BUT this will create conflicts when you try to use any other relative paths, like in your img src - since you've set <base href="https://www.youtube.com"/>, your img relative path will literally point to https://www.youtube.com/img/1.png - I assume that's not what you want...

Probably better to just put the whole video URL in your iframe src and ditch the <base /> declaration altogether.

Upvotes: 0

Related Questions