I have an iframe that references an external URL that serves up pages that contain Flash adverts.
I need to track how often a customer clicks on one of those adverts.
The approach I am taking is to render a div element over the iframe. This allows me to intercept the click event, however I need to pass that click down to the iframe. Is this possible using JavaScript?
No, it's not possible. You can't simulate a real click in javascript, you can only fire click events.
I do not think that it is possible as well
But, assuming that the clicks redirect the user to the site of the advert, you could intercept the user click using redirections. Change the link to some script on your own server with some unique advert id. Register the click and redirect the user to the advertisement page.
Another possibility is to use this technique to load the contents of the iframe, so you known the amount of customers viewed the advertisement. But this of course might be an advertisement scheme your advertisement customer does not like/want.
You can't pass the click through by any legitimate means, and you'll run up against cross-domain problems if you tried to fake it in anyway. And I would definitely stay away from anything that looks like a clickjacking solution - it's bound to stop working (and feels evil too).
You may be able to hack something, depending on how accurate it has to be. This would involve tracking the sequence of events happening when user has put their mouse into the banner area and then left the page (inferring that they clicked on the ad). You'll miss some, and you may catch some false positives too.
It would work something like:
Leave the covering div in place
onMouseOver, hide the div and set an
onbeforeunload event handler that
registers a "click" through an AJAX post (or similar)
when the mouse moves out of the banner area it means they didn't click the ad, so show the div again and remove the event handler
I'd guesstimate you'd get about 80-90% accuracy, but you're going to have to test on a lot of browsers. It's also assuming the ad loads into the same window and not a new one. If it loads into a new one then I think it's going to be even harder.
Related
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.
I have searched some things about click on coordinates with javascript and
i have found that this line of code helps you click on x,y coordinates
document.elementFromPoint(x, y).click();
So when i put the width and height of an html element or a button it clicks it good and it redirects me to the page that i want.
But when i have an iframe html object (like a google ad) it doesnt work.
I cant understand why though because i think "click()" is like simulating a normal mouse click... or am I wrong with this?
I have read that iframe has a protection that you cant go inside the html elements but all i'm trying to figure out is how to simulate a normal click on the iframe.
Thanks a lot for your time.
This is obviously prohibited due to security issues.
If it was possible to programmatically trigger a click event within an iframe, you could trigger certain actions on behalf of the user visiting your page. You could for example open your own twitter account in an iframe -- the visitor of your page logged in -- and let the user follow you with a click on the follow button. You can certainly think of more critical examples...
Basically, you could take over all accounts the user is logged in with a cookie. You can open any web page in an iframe and act on behalf of the logged in user by simulating click or keyboard events.
I have my HTML5 games site FunInBrowser.com. I have a list of third party URLs, which should contain HTML5 games. I display those games inside a small IFRAME and put title, description, rating around it. The game may look like this: Connection.
Some guy uploaded his URL, which looks OK, but it changes the top URL from IFRAME. Here it is: Draughts. I didn't even know, that you can have this level of control from IFRAME.
Is there any way to forbid this behavior of IFRAME? I want to keep games in small frame and stay at the same URL.
In html5 you can use sandbox attribute. But not all browsers suppor it. There is a good article about it http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
Browser support table is here http://caniuse.com/iframe-sandbox
You should be able to add an event listener for onbeforeunload to the iframe, which checks the new URL against a list of valid URLs. In the event handler, be sure not to return a string, unless you want the "Are you sure you want to exist this page?" dialog to appear.
I should add, though, that this doesn't prevent his page from overriding the event handler you set up. It should work for your current scenario, but would be pretty trivial for him to work around.
i want to know is there any way we can know browser's events.. like : clicking on BACK button, FORWARD button, REFRESH button by javascript.
These specific browser events are not available as it would be vulnerable to severe privacy violations. Privacy is something browser vendors hold sacred and a key selling (proverbial) point. All browsers allow you to know is when a user enters or leaves your page for which Kamui pointed out the technical details.
Within the same site, it's possible to achieve some browser event tracking using cookies and javascript. For example track wether users click on a hyperlink and label it as a forward event and when a user leaves the page without clicking on a hyperlink it could be one of:
browser url input
back action
javascript location.href replace
The location.href replace can be tracked as well when you have full control over all javascript, just use a helper method with tracking code instead of directly chaning location.href.
That leaves browser url input and the back action. With cookies and request headers (getting the referrer) it is possible to get close to finding out the forward and back events, though not 100%, but pragmatically, 99% sure is good enough.
Figuring out the refresh event is easy with request headers (referrer), if the current url matches the referrrer, it's a refresh event.
Now I offer no code or definite solution, but I outlined what you could do to track back, forward and refresh events within a single domain context. It won't be a quick and easy way to implement it and as far as I know, there's no framework in existance that reliably tracks browser events or even comes close to what I described above.
A more common/lazy technique to achieve something similar is to create a single page app, for which there are many frameworks available. Just google single page app framework, but thats a pretty heavy solution with other implications that I won't go into now.
You can not capture (for example run some piece of code when user presses Back button) them, however, you can direct your pages in history by using:
history.go
history.back
history.forward
More about JS History object.
As #sarfraz says you cannot capture the back and forward button clicks but you could call
window.onbeforeunload = function(){alert("you just tried to leave the page");};
which should be triggered when either the back/forward/refresh buttons are clicked to perform an action, unfortunately you can't tell if they are going back or forward. Please note don't alert a message it's really annoying when trying to exit a page.
EDIT
you can also do this in jQuery if you have it
$(window).unload( function () { alert("Bye now!"); } );
I have an application where I use an iframe for a facebook likebox.
I want to subscribe, in the main page, to the event when the user clicks on the like button in the iframe.
Basically as soon as the user likes the page I want him to be redirected to a page I'll specify.
What javascript command can I use?
Thanks
Unless your parent document is on the same domain as the Facebook Like frame, you can't script into it at all, for security reasons. This is the Same Origin Policy. It prevents you not only from detecting the click but also from impersonating the user, forcing them to perform actions (such as Liking you) without their consent.
You can try to place an element on top of the frame to detect clicks, but by intercepting the click you also stop it going through to the frame. About the best you can do is detect a hover over the area of the Like button and remove the covering element, allowing the user to click. This isn't reliable though since it'll catch all mouseovers.
You can hook this up to the button
onclick = "window.location('www.google.com')"
obviously replacing the URL with yours. But you might want to check if that's legal.