How to access main window element from iframe - javascript

I hope someone can help with this issue. I have a popup iframe using lytebox. I would like it that when I click a link in my iframe with the class mylink that it executes the AJAX call and update a div in my main window with the id="mydiv".
I know how to do the onclick events and the ajax call but I do not know how to access the mydiv from the main window and update it with the content.
Any help on this would be greatly appreciated. Thanks.

You can simply use window.parent.document to access the parent document from the iframe.
jQuery allows you to specify a context for searches, so you could then do:
$(myselector, window.parent.document);

Related

JavaScript in iFrame modify objects out of the iFrame

I have a page with an iFrame embeded. Now I want to modify a object (for example a Button) outside this iFrame by clicking on a button inside the iFrame (with Javascript).
How does this work? Can I just do it like usual?
You can access the parent window using window.parent. From that point, you should be able to do it like usual.
Example :
$('#yourButtonId', window.parent.document).
See also how to access iFrame parent page using jquery? as the question has already been asked

child window onfocusout event not firing on refreshing

I have one main window and some child windows. My child window is creating by code behind.
var newWindow = window.open(url, windowName, windowFeatures);
Also I need to add
newWindow.document.onfocusout = this.windowOnUnload;
event to the child. My problem is that, when I need a POST action to this page I again recreate this child window with the same code stated above. But the onfocusout event is not firing. But first time it will fire. Also I am creating the child window is always with the same window name. Please help me finding a solution. Thank you
When you recareate the window, did you mean update its contents with an ajax call? or do you literally close it and then again call window. open, and finally wire the onfocusout event?
If the former is the case, then you will need to rewire the event to the new document that has been obtained using the AJAX call, as the whole document is changed and the previous event handlers for the previous document object are no longer relevant.
Update: could you post all the relevant code that you are using? This is how I can best help.
newWindow.document.onfocusout = this.windowOnUnload; doesn't seem to be the correct way to do what you need. I'm surprised it's working with you. Check this question: Is there a way to detect if a browser window is not currently active?

Change URL in an iframe using javascript

I have a in an iframe, that calls a function from the parent page. The function is window.location, however this does not change the url. Is there a way to have the iframe call a function from the parent page, that will cause the iframe to change url? I also had a basic qustion, if I have an iframe, and click on a link that brings me to a new page, does the parent page remain open?
Thanks in advance for your help. Sorry if I sound like a complete idiot, I am new to javascript.
Dave
window.location is not a function, it s an object.
To do what you want, first make the iframe call a special function from it's parent.
parent.sendMeToGoogle();
And in the function (in parent) do something like:
function sendMeToGoogle(){
document.getElementById('iframeID').src="http://google.com/";
}
If what you really need is to change the parent URL, you can use window.top.location.href='http://anotherURL.com' even if they are in different domains, from the iframe page.
I assume that you want to do more in the function of your parent page; if not you can just change the url of the iframe without calling the parent of course...
As for your second question, the iframe behaves like an ebmedded page: you can browse all you want in the iframe without affecting the parent (except of course with javascript calls like the one you want to use), but browse with the parent page and you will lose teh iframe as well.
Hope that was the explanation you were looking for :)

How to move iframe along the DOM without losing it's content?

Is it possible?
I have tried to move it, but iframe contents dissapear.
Tried to get contents of iframe and place them in the new place but all handlers ofc dissapear.
Tried to do the same, but with new jQuery 1.4.2 feature, that clones all events along with it.
But it doesn't work :)
So I have decided to ask here for help.
How to move the damn iframe to another place in the document without losing it's contents? ^_^
Thanks
Added:
txtad_iframe = ad_container.find('iframe');
its_contents = txtad_iframe.contents();
its_body = its_contents.find("div:first").clone(true).insertAfter(cthis.find('#photos'));
Here i'm trying to copy contents to new ad container. But it doesn't work. Context banner doesn't react on click event.
I have tried to move ad_container to container, but iframe body content dissapears.
I believe that items in an iframe aren't bound unless done so explicitly in that iframe. in other words, the iframe contents don't inherit the binding events from the parent window. you will have to bind first in the iframe and then move stuff around.
i think.
EDIT
I think you may want to do something like
its_body = its_contents.find("div:first").clone(true);
$(its_body).insertAfter(cthis.find('#photos'));

Jquery - intercept links clicked inside an iframe

I am trying to intercept links clicked on a page including those inside an iframe. This is the code that I have but it is not working. Any ideas what I need to do?
$("#container").delegate('a', 'click', function(e){
//do stuff
}
Container is the id of the div just inside the iframe.
Thanks in advance for any advice
You need to reach inside the <iframe> and set the delegate there, you can do it like this:
$('#myiframe').contents().find("#container").delegate('a', 'click', function(e){
//do stuff
}
Edit - Mailslut makes a good points below, if the iframe isn't on the same domain (and port), you can't do anything like this. If that's the case and you want to know more about why, read about the same-origin policy there for security reasons.
Why not add the event listener inside the iframe and then call the parent / opener to notify the event.
If you the contents of the iframe is on a different domain, you won't be able to perform this as it is classed as "click-jacking", which was a big security threat.

Categories