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.
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.
Most resources suggest using onclick handler with trackEvent() for tracking outgoing links. BUT this way does not work with all navigation methods! It won’t work if you click with middle button (except Chrome) or control-click (except Chrome and FF) to open new tab, if you right-click and select new tab or window from context menu or if you drag link to another tab. Is such cases onclick is simply not called. You can check it with very simple link:
GO
Putting JavaScript in href attribute breaks the link in all cases when new tab or window is opened.
Putting onclick in span that looks like a link, will not allow users to decide if they want to open in new tab or not.
Finally, going through a redirect page, which tracks outgoing event, causes problems with back navigation – when users try to go back, they get back to the redirect page and then JS again redirects to the destination page. They need to click back twice … quickly.
Is there a better way, which would be both accurate and user friendly?
Context menu can't be detected by using JS. So if you want to catch that you need to use the redirect method. To fix the back button problem, redirect using location.replace to remove the tracking page from the back-button history.
I don't know any details about Google Analytics. In general, to track users' external navigation:
<a ping> is made for this purpose. If ping is not available, fall back to changing the links to go through a redirect page. Use a 302 redirect to prevent it from showing up in history; if you can't, try javascript:window.location.replace().
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 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.