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.
Related
So I have this web application that our customers use. It is like xxx.mydomain.com. I have another web application that is like yyy.mydomain.com. So what I want to do is have a hidden div with iframe on xxx.mydomain.com whereby when a user clicks on a button on xxx.mydomain.com this "floating" div with iframe (which src is yyy.mydomain.com) will display over top of the screen of xxx.mydomain.com.
We are doing this versus opening a new window so that the user feels like they are the same experience. It will feel like the second program is part of the first program. So all of this is working fine.
So on the second program (yyy.domain.com displayed in iframe) I have a button that basically tells them to go back to the main program. I want to be able to capture this button click event and hide this "floating" div with iframe so the user then sees the screen of the main program.
How do I go about doing this? Any help would be appreciated.
If your second app is always in the iframe, you can call functions from the parent document using:
parent.myFunction();
You need to bind event over button but as it is iframe,trick is to select content of iframe then find button over it to hide parent of iframe.
code:
$('body iframe').contents().find('.backButton').bind('click',function(e) {
//lets parent of iframe is having parent class
$('.parent').hide();
});
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
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
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?
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.