Issue with running parent jQuery function from iFrame - javascript

Running into an issue here. I have an iFrame that on click needs to open up another page within a separate iframe on the same parent page (two iframes on a single parent page on frame 1 links open in frame 2). The UX function requires that the second iframe fade in from hiding. We are able to get the frame to load but the problem is that the .fadeIn does not work with .click().
jQuery Code on iframe 1:
$(".frame-link").click(function() {
$('#node-frame', window.parent.document).fadeIn();
});
It works fine without the click function if the iframe 1 script is simply:
$('#node-frame', window.parent.document).fadeIn();
When we attempt to do an on click command no luck. Anyone know what we might be missing?
Note:
#node-frame css set to hidden on parent css

Related

iframe loads multiple times

I have a problem with iframes. The problem is that I have a main page and menu which loads a content with iframe. On main page I have also a div "MessageBox" In one iframe I display content of variable in "MessageBox", so I have a full screen message on my MAIN page.
example in iframe I have button which generate this:
content="<input type='button' value='OK' class='Ok' id='Ok'/>";
MessageBox("Click OK", content, "child", "400", "170");
In iFrame I have jquery function:
$(".Ok",window.parent.document).live("click",function(){
alert("OK");
});
and everything if OK, only when I enter on this iframe at the first time. I see alert("OK") and its cool, but when I click other iframe from menu and again this iframe I see alert("OK") two times, when I click again other iframe and back to this Iframe I see 3 times alert("OK").
Can someone help me with this issue? Is there any iframe cache or something like that? I think that every time I open my iframe it is stored in memory and that why I have many calsses ".Ok" and when I click button "OK" the libe click method is executed as many times as I have stored iframes in memory?
Please help :)
The problem is, that every time you are adding another iframe from menu, you are registring new click handler to every element with '.Ok' class, so also for every iframe element you already loaded.
Edit: To register the click only for the .Ok element in the iframe use:
$('.Ok').live('click', function() {...});
without the scope to the parent window.
BTW: $('...').live(...) is deprecated. Use .on() to attach event handlers.

Multiple iFrames: block parent page until user finishes his job with the current frame

My requirement is to show 3 third party pages using iFrames. I need to show these 3 third party pages, 1st one on click of image, 2nd one on click of anchor where these two are present in the content page holder body portion and 3rd one on the click of anchor in Header party of the page which is in master.
Right now, i'm using 3 iFrames for each one of them.
My Problem is when still one iFrame is open, I'm able to click on the other iFrames which should not be ideally. I mean if one frame is open, the parent page should not be accessible to the user until he finishes save or close the iFrame. Even i tried jQuery blockUI, but the loading message is appearing on the iFrame which is unpleasant for the user to access the iFrame.
1) I need clarification how to achieve the functionality, only the iFrame which is opened at present is accessible and make the parent page unaccessible until user completes his action on the iFrame opened currently. Blocking the parent page till user finishes his job with opened iFrame.
parent.window.$.blockUI(); //but it is making the iFrame visibility hided by the msg
Please provide me some feasible solution to achieve the above functionality.
2) can i use single iFrame and dynamically change the src attribute using javascript? or maintain separate iFrames individually to avoid dilemma in using frame ID's.
Please advice me, i achieved all the functionality with frame except these two things. If these are achieved then the functionality will be perfect without any hassles for the user to access the UI.
jQuery dialog option modal=true solved my first problem. As of now i kept individual frames for the 2nd one..

Iframe scroll due to the links inside it

I have a page with a fixed header div like a tool bar and an Iframe which loads content form the same/different domains.
The problem is whenever a link inside the iframe is clicked, it scrolls the page to the top hiding the toolbar itself. This happens in desktop/mobile webkit browsers.
Note:- I found the reason for why the iframe scrolls the parent page when any link inside it is clicked, it turns out that if the anchor tags within the iframe have empty hash values i.e href="#" and if they are clicked then it causes the parent page to scroll to point from where the iframe starts. This happens in webkit browsers only for me. This is not reproducible in FF.
If you are dealing with the problem in Javascript simply use this code:
ifrm.setAttribute("onload","scroll(0,0);"); //(ifrm is the id of the iframe)
or
<script language="javascript">
function totop() {
scroll(0,0);
}
</script>
and in your html for iframe, add an onload attribute as below:
<iframe name="iframe" onload="totop()">
Got this 2nd solution from another forum, and changed to the 1st one to suit my requirement as I am creating the iframe element and setting its properties in javascript and not in html. It worked for chrome as well as IE. FF didn't have the problem in the first place.

colorbox refreshing parent window without closing popup

I am using colorbox for showing pop ups. Is this possible to reload parent window without closing pop. I mean I want to do actions/events in the pop up and the changes should be displayed at parent window.
Thanks
You can definitely play with the elements in the page from within the colorbox. You can't, however, "refresh the parent window" as you stated in the question title, because then you will also lose the colorbox (which is a part of that page).
But judging from the rest of your question, you simply want to make changes in the page. If your colorbox is not in an iframe (e.g., you have not explicity set the option iframe:true) then it's pretty straightforward. Just create event handlers that are called from actions performed in the colorbox.
If you are setting the colorbox to open an iframe, there's a couple things to be aware of:
The iframe page (the contents of your colorbox) must be within the same domain
Use the parent. in the iframe's JS that references the parent page
Here's an example of the colorbox code you would have in the iframe page:
$(document).ready(function() {
$("a.internalColorboxLink").click(function() {
parent.$("body").append(
parent.$("<div/>").text("MY NEW TEXT")
);
});
});
In fact, this is the almost the same code as would be in the inline colorbox (that is, the js in the parent page). Simply remove the parent references.
I can post more concrete examples if you update your question with exactly what you want to do.

Extend Fancybox inside an iFrame to outside

I got stuck in a problem here. I have a fancybox inside an iFrame, and it works normally, but I need it to extend outside the iFrame so it can fill the whole screen (I mean extend to it's parent).
Does anybody knows how to do that?
If both the page and the iframe are in the same domain, you can open the fancybox window in the parent from inside the iframe. Check out the demo.
Parent Window (contains fancybox script, css and iframe)
<iframe src="child-page.htm" height="250" width="500"></iframe>
Child Page (contains script to call fancybox in the parent)
$('a').click(function() {
// target the parent window (same domain only)
// then call fancybox in the parent
// You can add any HTML you want inside the fancybox call
window.parent.$.fancybox('<img src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg" height="333" width="500">');
});
It's not possible. Iframes are independent pages and can only interact to the parent via JavaScript, and even then it's shady behavior.
Your fancybox cannot extend out of the iframe no matter what you do, but with some work you could call to one on the parent page via JavaScript.
This post will answer your question in both directions (parent -> iframe, iframe -> parent): Invoking JavaScript code in an iframe from the parent page
As a side note, iframes fell out of vogue about 5 years ago. I'd avoid them in any new production.
Cheers. :)

Categories