Triggering a target=_blank link from JavaScript - javascript

This is a nasty one.
I have an external link.
<a href="http://www.example.com" target="_blank">
now I want to track a Google AdWords conversion every time that link gets clicked.
To do that, I add a click event that loads a Google image. The image counts the conversion. To make absolutely sure the image gets loaded before the user leaves, I use the image's load event to proceed to the original link's target.
$("#linkname").click(function() {
var element = document.createElement("img");
element.onload = function() { ..... };
element.setAttribute("src", "http://www.googleadservices.com/....");
document.body.appendChild(element);
});
This will work fine using location.href. However, it won't work for target="blank" links.
I'm baffled as to what to put into the onload function in order to open a new window.
I can't use window.open because it will be caught by pop-up blockers (Because it's located in the image's onload event, it looks like a purely programmatical call that has nothing to do with the link being clicked.) Also, calling window.open without any options does not give me any controls in Google Chrome.
I can't make the click event continue its normal course because I have to wait until the image is loaded, which is an asynchronous operation!
What I would need, essentially, is a way to open a target="_blank" link programmatically, something that may not be possible because it could be circumvented by pop-up-blocker-breakers.
Alternatively, I would need a way to reliably count hits while letting the link's original click event continue as it's supposed to.
Does anybody have an idea what to do?

Since the link opens in new window, you don't really have to wait for the image to load. Let the image load in the current window (as is being done) and let the user see the new window as normal. It would be very unlikely that the user can close the window before the image is loaded, thus the count would not be disturbed.

I am not sure if it will work or if you can (because of some requirement) do this but:
Try to open a new window with no location, but on the real click event (not in the onload of the image), but open this window with width and height 0, and puts its x and y in somewhere not visible by the user, or less visible as possible.
Keep a reference to this window.
On the onload event of your image, change the location of the new window's url, and then resize and reposition the new window.
Hope it works.

Related

How To Use 'beforeunload' to Capture Iframe Click?

I am trying to build a code that does a request when a cross-origin iframe is clicked and it directs the main window to a new page.
Since it's impossible to directly tap into Iframe click events, I thought of the following conditions as necessary:
page unload event occurs
the window is out of focus
Page unload (As far as I know) happens only when the current url is directed to some other url.
Now, this unload could happen by clicking any link. To restrict it to Iframes, I added the condition of window being out of focus.
addEventListener('beforeunload',(event) =>{
if(!(document.hasFocus())){
// Do Something
}
});
My question is, are their any limitations to this approach? If yes, then please suggest some more conditions to make it as close to reality.
For those of you, who are curious: I want to track clicks on Google AdSense Iframes on my website.

Getting the contents from a window.open()'ed window after redirect

I have a web application that runs in Chrome with Same-Origin Policy disabled (i.e., --disable-web-security). I use window.open() to create a new window that loads a URI that sometimes redirects. If no redirect occurs, I can read the contents of the document hosted inside the window using the document property when the onload event fires. Unfortunately, in cases where a redirect does occur, it seems that onload never fires, and the window object returned from window.open() is no longer useful.
Here's the code, to give you an idea of what's going on:
var win = window.open('http://somewhere');
win.onload = function() {
doStuffWith(win.document.body);
win.close();
};
Is there any way that I can hold on to a valid window handle even when a redirect occurs immediately after the new window is opened?
Per #CBroe's suggestion I extended my code to see if I can get at the contents of the window if I wait a little while. After the code above, I appended:
setTimeout(function() {
console.log(win.location);
doStuffWith(win.document.body);
}, 5000);
The location is reported as swappedout:// (huh!?) and the document's body is empty.
The problem is that if the relocation is not exactly after lets say an on click event pop-up blocker provided by most browsers blocks the request, on success of some function you want, open a modal with a button and have the relocate on click of the new button. Its the only way. Not great but it will do the trick.
This also applies to the on load.

Open link in new window using javascript?

i tried below javascript and it does open the url in open window but it clears the url in the current window as well points to the new URL.
window.open('http://www.google.com','_blank');
This is occurring because the second spot where you have _blank is where the name should be.
I would recommend as the link above that Nathan post suggests doing this. :
window.open(url, windowName, "height=200,width=200");
Then doing some javascript triggering on whatever event is causing the new window to open.
So, lets say it is an image, set the Target="_blank" for the image and then set an OnClick event to call a function with the window.open code in it.
That will do the trick. HTH

Is there a way to make sure target = _blank links open in foreground?

For some browsers (and depending on settings), links with target = "_blank" seems to open in the foreground, but for a lot of others it seems to open in the background.
In my case opening in the foreground is what a user intends when she/he clicks on the link, so it would be nice if there is a way to ensure that. Is there a way to do this? Thank you.
There is no way to make sure these links open in the foreground. This is something the browsers arrange and there is nothing you can change about it.
You could however open the link in the same window by leaving out the target attribute, that will ensure the people clicking the link get to see the page immediatly. In a way this is also 'nicer' since it leaves the choice of opening the link in a new window to the user itself.
You can try using window.focus() to bring the new window to the front. You may do it on the opened document, using jquery, with:
$(function() {
window.focus();
});
or from the original document:
var newWindow = window.open(url);
window.setTimeout(function() { newWindow.focus(); }, 1000);
The setTimeout is needed to allow time for the window to be actually created by the browser. There may be a cleaner method to achieve this, but the setTimeout should do it.

How to open 2 different link one in same window and another one in new window from one link?

How to open 2 different link one in same window and another one in new window from one link? I want to open one link in parent window and other one in new window not new tab in all A-Grade browsers
Use a javascript function that first calls window.open and then window.location.
Typically, if you use window.open and specify a height and width for the window it will cause most browsers with most configurations to open it as a new window and not a new tab.
The following will add a popup window to the link with the id link-of-doom. Specify the link that you want the current page to redirect to in the href attribute as you normally do.
HTML
Click me!
JavaScript
$(function() {
$("#link-of-doom").click(function() {
window.open('/page2.html', 'sometarget', 'width=400,height=200');
});
});
* You should not use the onclick attribute in the HTML itself as it is not considered a best practice . . . and a kitten is killed every time someone uses it.
Your link
This may or may not work, depending on whether the 'onclick' handler runs before the standard behaviour of the link.
If it doesn't - or is intermittent - let me know, and I'll supply an alternative approach.
EDIT:
As an alternative, I'm thinking that you could have 2 links, one for the 'new' window and one for the 'current' window. Make the 'current' window link invisible, using css, amd add an 'onclick' handler to the 'new' link, that fires the 'current' link.
Your link
Hidden link
Be sure to check this on multiple browsers.
P.S. I'm assuming that you're using jquery - if not, the code that triggers the 'click' event will need to change.

Categories

Resources