Track Click inside a iframe - javascript

I want to track with a google analytics event the click on a href that is inside a iframe on my page. The iframe is in the same domain.
Is it possible? how?
The iframe is insert dynamically on the page after it loads. Is it important for this code to be put after the iframe?

If the iframe is on your domain the contents of the iframe are propably under your control ( if it wasn't you wouldn't have any business tracking the frame). So you can simply install the Google Analytics tracking code in you iframe'd document (which you want to do anyway, after all a framed page is not very different from any other page on your website an you'll want to know how often it was called). So while you can access the parent frame from your (same origin) iframe (calling window.parent) it is not necessary or recommendable.

If the iframe is the same domain, you can (from your main window) wait for the iframe to load and then install an event listener to handle the click on a particular link.
The code you will need is:
Code to wait for the iframe content to load.
Code to find the relevant link in the iframe
Code to install the event listener
Code to handler the click event

Related

Submit form of iframe which is in different domain from parent window

I need to submit a form which is loaded inside a iframe.
But this src will be loaded from different domain from its parent page.
I have tried Window.postMessage which can communicate to inner iframe but I doubt for cross domain page also for which we cant have to source control we can't add listener to that page.
So, Any help on this for iframe cross browser site communication without any code added on the iframe page.

How to make javascript that'll click automatically inside iframe's link?

Is it possible ?
I've made on page with iframe, I want a script that'll click automatically inside in one iframe's link.
But I also want that script to detect half link, I mean the link which is in iframe changes everytime, but the first part of the link doesnt change, so the javascript should detect half link which doesnt change and redirect to it...
Why don't you write a "client" library and import it within iFrame. This library listen to a message from HTML5 postMessage call with certain attribute and react appropriately. Since you have access to the parent object through the event object (or window.parent), you can also send response back with the result. This way, it doesn't matter if it's cross-domain and as long as this library exists, you can communicate back-and-forth and even has the iFrame initiate if you write it properly.
I can't share the code with you since it's our proprietary library, but that's part of the idea.
If the content of your iframe is from a different domain, you can't. Allowing this would be a major security concern.
If your iframe content is in the same domain, then you can access the iframe content through its contentWindow property. You can then work with your iframe link the same way you would if the link was in the main page.

iframe events in other html

I'm using an Iframe to have an html file work on a homepage when someone clicks on a link. When I use the html file by itself as a webpage, things like multiple key depressions and such work and are accessible. But they aren't when I access the html via an iframe.
Is this even possible?
Edit
Oh, I have a function in my main.html file, which detects key depressions and plays video files based off of key presses (it's a psuedo video game). It uses eventlisteners and objects to detect positions of keys. But again, this doesn't work when I view it in an iframe from some other html page, index.html
First off, if your iframe and parent are on different domains, you're going to have some security issues that you may/may not be able to get around (read Cross-Domain Communication with IFrames).
As for how to access your iframe's events from the parent.
See:
Adding an event listener to an iframe
Add event to iframe body
Adding click event handler to iframe
Adding event handler to an iframe using JQuery
EDIT: Should mention that your question is a bit ambiguous, so I'm kind of shooting in the dark here with this answer.

How to load an iframe after another iframe that has loaded

I have an array of URL's and I want to create one iframe for each URL that I have.
But what I want is create and load the next iframe only when the previous was totally loaded.
This is the function that create the iframe:
function loadSubsequencePages(links){
var id = document.getElementsByTagName("iframe").length;
for(var i=0; i<links.length;i++){
var frame = document.createElement("iframe");
frame.setAttribute("id","frame"+id);
frame.setAttribute("src","about:blank");
document.getElementById('frames').appendChild(frame);
changeLoc(document.getElementById("frame"+id),links[i].href);
}
}
I want to move to the next i only when the actual iframe that I create was loaded.
this is the function that change the URL:
function changeLoc(frm,loc) {
frm.webNavigation.loadURI(loc,
frm.webNavigation.LOAD_FLAGS_NONE,
null, null, null
);
}
How can I do that?
That depends.
Do you have control over the pages shown in the IFRAMEs?
Are they
on the same domain as the hosting page?
There are four scenarios:
If they are on the same domain, you can access the content through
JavaScript.
If they are on the same domain, and you can modify the loaded
pages, you can tell the parent frame when the onload event
fires from the page loaded in the IFRAME.
If they are not on the same domain, and you can modify the loaded
page, security restrictions will block direct communication. But you
can ping a central repository on the server from the loaded page when
the onload event fires
If they are not on the same domain, and you can't modify the
loaded page... Well you're in trouble... :) You will not be able to
check when the pages have finished loading.... Well.. You could create some ugly
timer loading the pages at a set interval... But don't tell anybody I
told you so... ;)
If the iframes point to a URL that is another domain, all you can do is put an onload event on your iframe - that will tell you when the Iframe starts to load, but you'll never be able to tell when the load is complete because of the Same Origin Policy. The page inside is isolated from the hosting page in this situation.
If the iframes point to the same domain, you can insert some sort of document.ready code into the page that can then call a JavaScript function in the parent page announcing that it has finished loading.

Hide iframe from main window

I have 2 <iframe> on my main HTML form.
These <iframe> are loaded from different external domains. Sometime external server goes offline and user see The page can't be dispayed message on my page.
Is there a way to hide these <iframe> when target server is not available?
You can use onload event to display iframe content. Make iframe invisible by default and set visible in onload event,
You could set up a listener for the load event and if this isn't called within a certain timespan then you hide the frame..

Categories