Member Avatar for designershiv

Hi,

Please look at this code

 <div class="box">
 <a href="http:www.google.com"  target="_blank">click</a>
 </div>

 //css

 .box { width:250px; height:250px;  border:1px solid red; }

 //script
 $('.box').click(function(){
    $(this).find('a').trigger('click');
 });

How to set target _blank when clicking the div.box.
click is working fine but it opens the page in same window.

Can you anyone have idea..

Thanks in advance,
Developer

  • 4 Contributors
  • 11 Replies
  • 329 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by paulkd

Dani AI

Generated

Several helpful directions are already in this thread: and correctly pointed out that using a real anchor is the simplest solution, and flagged the href/protocol issue. For the “obfuscation” pattern where the link must stay inside the article div and a click on the parent must open a new tab, the most reliable technique is to create (or find) a real anchor with target="_blank" and rel="noopener noreferrer", then invoke the DOM click() on that anchor from inside the div click handler. That triggers the browser default navigation and preserves the target behavior in a way that jQuery's trigger('click') or window.location.href do not.

$('.box').on('click', function (e) {
  if (e.target.closest && e.target.closest('a')) return; // let real links behave normally
  var url = $(this).find('a').attr('href');
  if (!url) return;
  var a = document.createElement('a');
  a.href = url;
  a.target = '_blank';
  a.rel = 'noopener noreferrer';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
});

Notes and caveats: jQuery's .trigger('click') does not reliably perform the browser default (navigation/target), and assigning window.location.href always navigates the same window. Calling the native click() on an actual anchor inside a user-initiated handler generally avoids popup blockers; if a fallback is needed, var w = window.open(url, '_blank'); if (w) w.opener = null; can be used. Also ensure the href is a properly formed absolute URL (starts with http:// or https://) and avoid double-opening when the user actually clicked the anchor itself.

If changing markup is allowed, the cleanest approach remains making the article container an anchor (styled as a block) so browsers handle semantics, accessibility, and security natively.

Recommended Answers

All 11 Replies

Member Avatar for paulkd

Your href value is incorrect, it should start http://

You don't need the JS to open a new window the (deprecated) target atrribute should take care of that for you.

Member Avatar for JorgeM

So, as you can see we are a bit confused as to this approach. If you can provide clarification on what you are trying to implement, better guidance can be provided.

If you are simply trying to create a box that acts like a link, try this approach. Simply use an anchor element, but style it with display:block. See this example..

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style> 
 .box { 
 width:250px; 
 height:250px;  
 border:1px solid red; 
 display:block;
 }
</style>
</head>
<body>
 <a class="box" href="http://www.google.com"  target="_blank">click</a>
</body>
</html>

This approach creates the look and feel as your sample code, but without the div element and the _blank works as expected.

Hope this helps..

Edited by JorgeM
Member Avatar for designershiv

Hi thanks for all,

I am not trying to create a box, Its like a article section.
What we will do is, we will get the article link and append to the parent div(.box) so ultimately it works.But target is not working.

Let me ask you straightly

<div class="box">

</div>


//css
.box { width:250px; height:250px; border:1px solid red; }
//script

var href = 'http://www.google.com';
$('.box').click(function(){
 window.location.href= href;   //This should open in target _blank 
});

Is that possible, Hope now question will be clear

Thanks in advance

Developer

Member Avatar for paulkd

HTML5 to allow target _blank

Still no need for JavsScript. I think you can simply wrap your div in hyperlink tag

<a href="http://www.google.com" target="_blank">
<div class="box">
    <p>Your content goes here....</p>
</div>
</a>
Member Avatar for designershiv

Hi paulkd,

I understand that, but our requirement is like that.

Our format should be like this and we say it like "Obfuscation"

<div class="box">
< a href="http://www.google.com"></a>
</div>

Our target is div should open in new window.

Please check the article section in the link, I hope you can understand

http://www.automobilemag.com/auto_shows/

thanks in advance,
Developer

Member Avatar for paulkd

Is it the <a class="article-top" /> that you will be targeting?

Member Avatar for designershiv

Dear paulkd,

Please check out the link,
I am targeting the below div, link should be inside the div with class .news-title and it should open in new window.

<div class="article-content"></div>
Member Avatar for paulkd

I think you might just be able to add

$(".article-content").find("a.news-title").attr("target","_blank");

to your js file.

Member Avatar for paulkd

But I would be wrong :(

Member Avatar for paulkd

So I think you are left with using window.open. Is this allowed?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.