We Keep Coding

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 avoid loading the source for iframe

I would like to improve loading performance for a page that has a button to trigger a popup initially hidden on the page (uses 'modal' component from twitter bootstrap). This popup body contains an iframe, which source is loaded on the page inital load adding about 30-40% more time to load, however. The iframe source is not needed to be loaded till the button is clicked which brings up the popup with the iframe. How can one avoid loading the iframe source on initial page load? ...only load the iframe source when the button is clicked? Can JS be used here? If so, then how or what method/library? Is there a better approach than make popup with iframe hidden in the page to improve loading time? Thank You

This is possible with JavaScript (no extra libraries required).
Simply use a function to set the src/display the frame when a link or button is clicked.
function loadIFrame(frameID, url) {
var frame = document.getElementById(frameID);
frame.setAttribute('src', url);
frame.style.display = 'block';
}
See the example here:
http://jsfiddle.net/ZNGmy/

Rather than having the pop-up as a hidden container that is made visible by the button, make the pop-up with the iframe content a separate html page that gets displayed by pressing the button. This way the content is not loaded until the button is pressed.
This link has an example of popping-up html pages.
http://allwebco-templates.com/support/S_add_pop.htm

When iframe is clicked it loads the page it is displaying

I am trying to make it so when you click on an iframe it loads the page it is displaying. I have tried putting it inside a <iframe src="something.com"></iframe> tag but that does not work. I want an effect much like zoomer were when your mouse clicks on the iframe it sends you to the source page. This effect would require the iframe to not allow selection of its text. I tried putting a layer above the iframe of the same size and having that link but this does not work because of what this iframe will be doing.
EDIT:
The iframe is on the same domain

Ok third try: The magic of javascript
jQuery has a method, called .contents() , that when used on an iframe element returns the document of the iframe.
// Get a reference to the iframe document
var iframeDoc = $('#inviteFrame').contents().get(0);
Now you can bind a click event to it:
// Bind event to iframe document
$(iframeDoc).bind('click', function( event ) {
// User has clicked the Iframe !!
});

You could make the entire page inside the iFrame a link with target _top, but only if the url is page.(html/php)#iframe

Oh, I see. Why not just an image of the page that goes to the actual page, instead of an iframe?

Track Click inside a iframe

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

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.