I have a web page loading a iframe (inside a modal Fancybox) and this iframe contains a form with 2 pages.
I want this iframe content to ask the parent to trig a function (so the modal can be resized when the 2nd page of the form is shown)
$.fancybox.update();
When executed in the iframe, it doesn't work because it needs to be in parent context. So far, I managed to do it with binding a click on the "next page" button inside the iFrame.
$('body iframe').contents().find('.goToPage2').bind('click', function (e) {
$.fancybox.update();
});
This was working.
But now, I have to do it without waiting for a click (it has to happen after getting an ajax response). So I tried to bind a "show" action, and make a div appear with after(), but it didn't work.
$('body iframe').contents().find('#page2').bind('show', function (e) {
$.fancybox.update();
});
I also tried to reach the parent directly from the iframe but with no luck in my case (fancybox) :
$('#page2', window.parent.document).fancybox.update();
If anyone can explain how I can achieve this, I will be grateful :-)
Related
So I have the following problem: I have a website in an iFrame. I want the parent site to scroll up to the top once you go to a new page inside the iFrame, which it does via this JavaScript:
function scrollToTop() {
if ('parentIFrame' in window) {
window.parentIFrame.scrollTo(0,0);
return false;
}
}
But, on one page I have a two-part form. If you submit the first form, you get to the second one, but both parts are in the same PHP document, so you stay on the same page, but the iFrame is reloaded. I want the page to scroll to the top once you submit the first form, but the above JavaScript doesn't seem to work. Can anyone help? Would be much appreciated!
use iframe onload event that will get triggered, once frame loads content,
onload="myFunction()"
During the first form submissiom submit the page through Ajax call back method
I have an application that produces many pages of content. In order to expedite review of the process, I have a linkbutton that opens a child window starting at the page I'm on so reviewers can enter comments. I open the child window in javascript
objCmtWindow = window.open(MyURL, "comments", "width=800,height=600,menubar=no,toolbar=no,status=no,location=no,resizable=yes,scrollbars=yes,directories=no");
objCmtWindow.focus();
The child window has some javascript (an excerpt from a larger script) to listen to an API in the parent window so that it can know what to load
function updtSlide(){
if(window.opener.MyAPI)
{
window.opener.MyAPI.addEventListener("MyEnterBtn", function(e)
{
updtContent();
});
}
}
It works on load to grab the data with the function updtContent as part of the page load. When I click for the next page (MyEnterBtn) in the parent window, the child window is not updating for the next page data it needs to display. Is there a piece I'm missing to poll the parent window? Since the parent can operate independantly of the child, I really can't put the command in the next page button. I know the API is working correctly and emitting next page events.
Thank You
In the js function, the first 'opener' is spelled wrong.
I have made the following site:
www.ppp.one
Whenever you open an image, a popup is loaded.
This popup can be closed using the X on the top-right. However, if you click on one of the thumbnails in the popup (reloading the frame) the X button can no longer close it.
The JavaScript I use:
function hide(){
if(currentIframe){
currentIframe.hide();
currentIframe = null;
}
popupBG.remove();
popup.remove();
}
And the html:
<a class="small align-top" onclick="frameWarp.hide();">✖</a>
Any ideas on what is causing the issue?
When you open the popup you call a function setUpAPI which inserts the frameWrap object into the global scope of the iframe.
When a thumbnail is clicked the frame is reloaded and the frameWrap instance is no longer available.
You could try listening for load events on the iframe instead of ready events:
iframe.ready(function(){
frameCacheDiv.append(iframe);
});
iframe.load(function(){
setUpAPI(iframe, settings);
settings.onShow();
});
It looks like when the iframe's URL changes the frameWarp variable becomes undefined. One idea to try would be to listen to the load event of the iframe and make your changes there: (you'd have to give it the ID of "iframeId")
$('#iframeId').load(function(){
console.log('URL changed');
// code to attach hide event here
});
Another idea would be to change your setup to use the postMessage API for the communication between the parent and iframe. You can read a tutorial of how to do that here:
http://robertnyman.com/html5/postMessage/postMessage.html
Edit: Actually, this blog post is a better example: http://davidwalsh.name/window-iframe
I have a webpage with 2 iframes, 1 underneath the other. I would like both iframes hidden when a user first clicks on the webpage. There will be 2 buttons, 1 above each iframe and the user must click on the button to show/hide the iframe
Here is what I tired(jQuery function) but it wont seem to work when I preview in chrome from expression web
jsfiddle.net/darego/Z62P7/2/
All you need to do is to call the function after the document.ready:
$(document).ready(function() {
hideToggle(".button1", ".iframe1");
hideToggle(".button2", ".iframe2");
});
Just placing it in document ready will not be enough.
You can make your function MUCH easier.
function hideToggle(elem) {
$(elem).toggle();
}
This means: If the element is visible > hide it, if it is hidden > show it.
But for your initializing (hide both divs) i would recommend doing it by css.
iframe {
display:none;
}
Also you need to setup click handlers for the buttons. If you need help on this write me a comment or edit your question please.
I have a page that has a number of iframes that load different pages on the same domain. Each iframe has normal pages which have links, forms, etc.. What I need to do is add a piece of JS to the parent page which would catch event for user navigating inside of any iframe. So if someone clicks something inside of one of iframes or submits a form or does anything like that, I want to catch that. I've tried different variations of this with no luck so far
$(document).ready(function() {
$("iframe").each(function(){
$(this).bind("unload", function(){
alert(1);
});
});
});
You could do:
$(document).ready(function() {
$("iframe").each(function(){
$(this).contains().find('body').on("click", "a", function(){
alert('1');
});
});
});
in this way from the parent page you attach an event handler that detects a click on every link inside the iframe and alerts 1. This should work only if the iframe is on the same domain of the main page, otherwise contains() does nothing.