Develop Reference

Bubble up mousemove event on iframe to the container div

I have the following code
<div onmousemove="myFunction()">
<iframe src="www.someotherdomain.com"/>
</div>
I want myFunction to be executed when user moves his mouse over the iframe. Is it possible to bubble up the events on iframe to the parent element in cross domain scenario? How will I do this?
PS:-
I can't use the solution provided in
Iframe obstructing the mousemove event from occuring
or
How do you send a mousemove event from an iframe back to the parent using jquery?
because I want the user to be able to interact with the content in the iframe.

I can see only one way.
Disable the session timer when mousing into the iframe and enable it when mousing out.
To do this, add a margin in the div and use mouseenter plus mouseleave from the outer div and vice versa on the way out.
If the window loses focus you may also want to enable the timer

simulate click on a specific place in page

I have a little problem with simulating a click with javascript.
I'm aware of the .click() method but the click must be on a prezi loaded (flash) so don't really have a html element to use.
What I have instead are the exactly coordinates of the place I want to simulate click on. Is there any way I can do that?
The click must activate a flash element. (A play button)
Note: There is a similar question around that have an answer witch require swf control. I don't have that so that method is not applicable.
One other quick question... what happens if I simulate a click on an element that has display: none. It click on the elements "under" it? (as a normal click would do; and yes I know this sounds funny but I don't know how to explain it otherwise). If yes I was thinking of making a position absolute div, put it on top of flash and use .click(). The problem is that i have a feeling that the click won't be applied on flash.
This is somehow a combination of javascript simulate mouse click on specific position and mouse click somewhere else on page (not on a specific div).

Make a transparent gif and position it absolute in your page wherever you need, then simulate a click on it.
I use this technique on some flash ads because I don't want to open links using JavaScript (since some users can be prompted with a question if they wan't or not to open a new page on click).

Open Iframe src on click

I want to open the iframe's src value in the whole tab/window when I click anywhere on it. How can I do this efficiently and easily? If you are curious, here is the page I am doing it on.

As #Pointy pointed out, you need add a new <div> either before or surrounding / containing (i.e. the parent of) the iframe which links to the src which you given the iframe. The div would have to be the same height & width of the iframe but as long you haven't applied any CSS rules under which this div would fall then it should work it out itself and contract to the needed height & width.

Even accessing the iframe document, you have to use some cross domain hack to be able to attach events to the iframde document.
You can have a look at: http://xkr.us/articles/dom/iframe-document/ to see how you can access the document.
Your best solution, and the simpler is the one suggested by Pointy in the comments. Use a div or transparent image over the iframe and attach the click event to it, grabbing the src attribute via javascript like: document.getElementById('myFrame').src

The bottom line is, from the client side, you will not be able to load the source of an external domain. You could do it through a server side httpclient call, but NOT from the client side.

Resizing iframe when document changes size

I have a web page with an application running in an iframe (same domain). The iframe's height is set on load based on the iframed document's height. The problem is when the iframed document's size is changed (by expanding an accordion, menu etc). Are there any events fired when this occurs, that I can use to resize the iframe element accordingly?
I have tried to bind to the resize event on the window object in the iframe, but as the window isn't resized when the document content changes, the event doesn't fire. What I need is some kind of resize-event on the document object, but as far as I know, there is no such thing. Is there another way to detect changes in the document's height?
I'd appreciate a general solution, as I don't know the content of the iframe exactly, but I can include generic scripts in it.

There are resize events fired for the iframe window. You can listen to them (in the iframe itself) and than trigger some function in the parent window to propagate new size and update the iframe size in the parent window.

Have you tried using the scroll event and attaching it to the contentWindow of the iFrame?
Otherwise I would rather suggest you hook directly into the accordion rather than relying on catching scroll events that may or may not happen.
Because scroll will only fire once the user actually scrolled the slider, not when the accordion expands..
But you could simply call a method on the parent when the user expands the accordion passing it the new size of the accordion.

I found a possible, but not ideal solution, and it doesn't work in all browsers:
By binding to the body element's DOMSubtreeModified in the iframe, I can find the iframe element in parent or top and change it's height.
$('body').bind('DOMSubtreeModified', function(){
top.document.getElementById('appFrame').height = $(document).height();
});
Here's an overview of the browser support for this event:
http://www.quirksmode.org/dom/events/

If you are using jQuery ui then you can use event change and call function
setHeight
http://jqueryui.com/demos/accordion/
function setHeight() {
parent.document.getElementById('the-iframe-id').height = document['body'].offsetHeight;
}

Override the getFocus of an external page that loads in iframe

I have multiple pages laoding in an iframe and one of them seems to be getting focus, since the page scrolls (by itself) to that spcific iframe.
Is there a way to override this?

iFrame onFocus event can be overridden to set the focus priority. But, be careful because it sometimes doesn't work with Mozilla. Also, I would prefer to use the Div and display HTML inside the Div.