Need javascript redirect to open in new tab WordPress
I have this code in the header of my WordPress page:
<script>
function redirect() {
location.href = http://www.test.com' ;
}
</script>
That redirects to test.com without issue. However, I want to open test.com in a new browser tab without triggering popup blockers. Any idea on how to modify this to do that?
I tried a window.open method, but Chrome blocked it every time.
Answers (2)
Andrea P answers:
the problem is that you can't force the browser to open in a new tab rather than a new window. that depends on the browser's settings..
and you can't use location.href in a new tab/window, because it's by definition a function which changes the header location of the current page..
this would be the code with windows.open.
<script>
function redirect() {
window.open = ('http://www.test.com', '_blank');
}
</script>
*EDIT: I read a few comments on this matter, and maybe if you place a different name instead of _blank it could be that the browser won't see it as a popup. try putting:
"_my_new" instead of "_blank"
*EDIT 2:
I might have found a cool solution that I've never thought about.. :)
try adding this code instead:
<a href="http://test.com" style="display:none" id="redirect_link" target="_my_blank">Redirect</a>
<script>
function redirect() {
document.getElementById('redirect_link').click();
}
</script>
normally the browser has set to open the clicked links into new tab, while the other kind of new_window openining are seen as popups.
so we create an hidden link, and with the function we trigger the click of the link as if it was clicked by the user.
Kyler Boudreau comments:
Hey Andrea,
So it looks like i'm kinda screwed on this. I can't launch this with a click of any sort.
I'm using this snippet of code to call it on a page after a Contact Form 7 form is submitted:
on_sent_ok: "redirect();"
So the above snippet uses the header code I have. The window method triggers the browser block.
Andrea P comments:
I think if you use my last bit of code, it should work.
on form submission, it will trigger that function, which will trigger the click of the link that is above the javascript function in my code.
Kyler Boudreau comments:
Andrea, the problem is I have nowhere to place the a href part. The 'on_sent_ok' that I'm using is tucked away in the CF7 form settings. They let you include stuff like that to run upon form submission.
Andrea P comments:
I understand that the call for redirect() function is just on the settings, but where do you put the script that you've posted?
can't you add the a href just above the script as I did?
if you can't, you could add the a href wherever on the top of the page where the form is. it doesn't really matter because it's hidden..
the important thing is that you also place the script with the functions which when called will search for that link, and will "click" it
Kyler Boudreau comments:
Oh I see. Okay, added as you said, and it worked, but still blocked by my browser (Chrome) as a popup.
Andrea P comments:
ah ok..
try putting target="_blank" instead of the personalized target.
but if it still doesn't work, probably the browser is understanding that the link was not triggered by an actual mouse click, and if so, I'd say it is impossible to trick it..
dimadin answers:
You can't use window.open outside of 'click' event and have browsers prevent it from blocking. That means that you can open in new tab but only when some link is clicked.
For example, lets say that you have a link to Google and that you want to also open Bing when that link is clicked, which means that Google opens in same tab and that Bing opens in new tab.
You would need this javascript code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
$( 'a.link' ).on( 'click', function() {
window.open( 'http://www.bing.com/', '_blank' );
} );
} );
</script>
and following HTML code
<a href="https://www.google.com/" class="link">Link</a>
You can play with that code inside click event to force new window etc, but only in that event.
Kyler Boudreau comments:
So it looks like i'm kinda screwed on this. I can't launch this with a click of any sort.
I'm using this snippet of code to call it on a page after a Contact Form 7 form is submitted:
on_sent_ok: "redirect();"
So the above snippet uses the header code I have. The window method triggers the browser block.
dimadin comments:
If you need this for Contact Form 7 redirection, why don't you use this, it works?
on_sent_ok: "location = 'https://www.google.com/';"
Kyler Boudreau comments:
Because I'm pulling in a custom field, which I didn't show in my code here so as to not confuse things. Basically, the sites has a place where the owners can provide the URL in a custom field. I'm then pulling that dynamically, which results in all of this 'mess.' You're right though, for a single link, the above would work great.