opening a new tab for a link url

Question

I want to open a new TAB not a new window for a URL link. I tried adding target="_tab" put still a new window is opening and a new tab. The new tab is saying LocalHost but it is not accessible. The new window is having the proper URL link.

I don't understand why a new window is open. Can we just have a new tab with the URL link ?

Here is the code:

  <div style="font-family: Arial; font-size: 10pt">
        <small>
          <a href="#" onclick="window.open('https://maps.google.ca/maps?
              q=3100+ReneLevesque+Quebec&amp;ie=UTF8&amp;hq=&amp;hnear=
              3100+ReneLevesque,+Quebec,+Qu%C3%A9bec+J4X+1C3&amp;t=m&amp;
              source=embed&amp;z=14&amp;iwloc=A')" style="color:#0000FF;
              text-align:end"  target="_tab" >Bigger Map </a>

       </small>
   </div>

MODIFY code Still not working, ie it is opening a New Window not a TAB.

       <small>
          <a href="https://maps.google.ca/maps? 
          q=3100+ReneLevesque+Quebec&amp;ie=UTF8&amp;hq=&amp;hnear=
          3100+ReneLevesque+Quebec,+Qu%C3%A9bec+J4X+1C3&amp;t=m&amp;source=embed&amp;
          z=14&amp;iwloc=A" style="color:#0000FF;
          text-align:end" target="_blank"  >Bigger Map</a>

       </small>

Answer 1

Try using target="_blank" instead of target="_tab"

Answer 2

1 - Remove unwanted behaviour

Remove the javascript onclick event as it is not needed. It is also actually what is causing you to get a new window because you are calling window.open. This is eaxctly what you don't want. Copy the required url to the href attribute instead of href="#".

2 - Set the target attribute

Change the target attribute of the a tag and set it to _blank which is a built in instruction to tell the browser to open the link in a new tab. In older browsers, _blank would open a new window (before tabbed browsers were around) but now all modern browsers will open a _blank link in a new tab by default.

It should look like this:

<a href="https://maps.google.ca/maps?
          q=3100+ReneLevesque+Quebec&amp;ie=UTF8&amp;hq=&amp;hnear=
          3100+ReneLevesque,+Quebec,+Qu%C3%A9bec+J4X+1C3&amp;t=m&amp;
          source=embed&amp;z=14&amp;iwloc=A" target="_blank" style="color:#0000FF;
          text-align:end" >Bigger Map </a>

Note

There are several built in target attributes:

• _blank
• _parent
• _self
• _ top

Here's some documentation from Mozilla about the target attribute:

This attribute specifies where to display the linked resource. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). The following keywords have special meanings:

_self: Load the response into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.

_blank: Load the response into a new unnamed HTML4 window or HTML5 browsing context.

_parent: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.

_top: In HTML4: Load the response into the full, original window, canceling all other frames. In HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self. Use this attribute only if the href attribute is present.

Any other string you use will give the target of the link a name and then you can use that elsewhere to open other links in the same tab. E.g. if you call it "dave" then it will open a new tab which the browser will know as "dave". Any other link with target="dave" will open in the tab the browser knows as "dave" - not a new tab.

Answer 3

You need to change your href a bit:

  <a href="https://maps.google.ca/maps?
      q=3100+ReneLevesque+Quebec&amp;ie=UTF8&amp;hq=&amp;hnear=
      3100+ReneLevesque,+Quebec,+Qu%C3%A9bec+J4X+1C3&amp;t=m&amp;
      source=embed&amp;z=14&amp;iwloc=A" style="color:#0000FF;
      text-align:end"  target="_blank" >Bigger Map </a>

Answer 4

How can I open a link in new tab (and not new window)? this question is basically the same thing.

In short you can use the css property:

target-new:tab

However, the general recommendation is that you shouldn't try and control what the user is doing, leave it up to them and their browser.

Answer 5

@model WebTest.Models.Urls
@{
    ViewBag.Title = "URL shortener";
}

<h2>Shorten a URL</h2>
@Html.ValidationSummary()

@using (Html.BeginForm())
{
    <div class="form-group">
        @Html.TextBoxFor(model => model.Url.Name, new { placeholder = "URL Shortened Name", @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.TextBoxFor(model => model.Url.UrlLink, new { placeholder = "URL Link", @class = "form-control" })
    </div>
    <input type="submit" class="btn btn-primary" value="Shorten" />
}

<table class="table full-width">
    <thead>
        <tr>
            <th>Url Shortened Name</th>
            <th>Url Link</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var url in Model.UrlList)
        {
            <tr>
                <td><a href="@(url.UrlLink)" target="_blank">@(url.Name)</a></td>
                <td>@Html.DisplayFor(modelItem => url.UrlLink)</td>

            </tr>
        }
    </tbody>
</table>    


[HttpGet]
            public ActionResult Index()
            {
                MvcApplication.Log.Info("Hello");
                  Urls urls = new Urls();

                urls.UrlList = ReadURLToFile();
                //Url url = new Url();
                return View(urls);
            }

            public ActionResult Index(Url url)
            {
                Urls urls = new Urls();

                if (ModelState.IsValid)
                {
                    urls.UrlList = ReadURLToFile();
                    AddURLToFile(urls,url);
                }
                return View(urls);
            }