CODEWITHSUNDEEP
javascript
LuxusMind
LuxusMind

Reputation: 19

Open results in new tab (Javascript)

I got an dynamic page with results, and the problem is that the links appearing there won't open on a new tab, this is the code but i am not being able to sort it out.

I would like that when a page (link) is clicked to have it opened on a new tab instead of going direct to the site.

BTW: English is not my native language, i hope i was able to describe it right.

   var updateResultsHtml = function() 
{
      for ( var i = 0, exists = 0, elements = []; i < results.length; i++ ) {
         exists += (statuses.success.indexOf(results[i].status) >= 0 ? 1 : 0);
         elements.push(appendChildren(createElement('div', ['class', 'col3']), [
            createElement('a', ['href', results[i].url, 'data-value', results[i].message], results[i].url.replace(/(https?\:\/\/)?(www\.)?/i, ''))
         ]));
      }
      resultsUsername.innerText   = username;
      resultsUsername2.innerText  = username;
      resultsPercentage.innerText = Math.round((exists / total) * 100) + '%';
      removeChildren(resultsParent);
      appendChildren(resultsParent, elements);
      togglePanel(resultsPanel);
   };

   var getExistence = function() {
      httpRequest('POST', 'existence.php', ['content-type', 'application/x-www-form-urlencoded'], 'index=' + index + '&username=' + username, function(data) {
         if ( index < total ) {
            ++index;
            results.push(JSON.parse(data));
            updateProccessingHtml();
            getExistence();
         }
         else {
            updateResultsHtml();
         }
      });
   };

Also my other question is related to the submit button, it has to be clicked in which case the code won't recognize Enter button, what would be the change to make it recognize the enter and make it submittable also when Enter is pressed.

submitButton.onclick = function() {
  index    = 0;
  results  = [];
  username = usernameInput.value;
  if ( username.length > 0 ) {
     window.location.href   = '//' + window.location.host + window.location.pathname + '#' + username;
     usernameInput.disabled = true;
     submitButton.disabled  = true;
     getExistence();
  }

Upvotes: 2

Views: 154

Answers (1)

Trent
Trent

Reputation: 4306

You can force your hyperlinks to open in a new tab using the attributed-text target attribute.

Target specifies where to display the linked URL. It is a name of, or keyword for, a browsing context: a tab, window, or iframe.

Syntax:

<a target="_blank|_self|_parent|_top|framename">

Attribute Values

The following keywords have special meanings:

  • _self: Load the URL into the same browsing context as the current one. This is the default behavior.

  • _blank: Load the URL into a new browsing context. This is usually a tab, but users can configure browsers to use new windows instead.

  • _parent: Load the URL into the parent browsing context of the current one. If there is no parent, this behaves the same way as _self.

  • _top: Load the URL into the top-level browsing context (that is, the "highest" browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this behaves the same way as _self.

Modifying your example to open links in a new tab

You can simply add the target attribute to your createElement function arguments, as follows:

createElement('a', ['href', results[i].url, 'target', '_blank', 'data-value', results[i].message], results[i].url.replace(/(https?\:\/\/)?(www\.)?/i, ''))

Upvotes: 1

Related Questions