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();
});
Related
I need to use a webpage as an Iframe, but the page has a button that expands a chat window. The problem is, how do I insert an Iframe without disableling the content that's behind it?
It's supposed to show just the button (from the other page) then, when it's clicked, the iframe should expand itself.the background is just for visual purposes
i'm new to web and facing issue while hiding a UI element in a webpage from another webpage.
Scenario:
I've a WordPress site (Theme-TwentySeventeen).
I've added a Logout button programmatically on page as shown in image.
I've multiple posts,
and every post has a button (play video).
When user taps on Play Video button, an iframe appears (fancybox). It has another button "Login".
I want to show/hide Logout button on main page based on the click on "Login" button in iFrame.
I tried to access Logout button using it's ID from iFrame. But it's not part of iFrame source code. and i was not able to access it.
P.S. I can show/hide logout button from the main page using JQuery.
Query:
Is there any way in web to pass notification from one page to other pages? Please guide
i fixed this issue by accessing element from parent window. My code is as:
function showLogoutButton(){
var logoutButton = window.parent.document.getElementById('logout');
if (logoutButton) {
logoutButton.style.display = 'block'
}
}
I'm not sure if it's a good practice. Please suggest if you've any other approach.
I have one video library website, on which I have to add one popup page which contain video list, now on that list if user click on any video, that video data should pass to parent video and play it, but Main requirement is parent page should not refresh.
I need something like,
(for example) on popup page user click on some button, let say Video001
and on parent page it shows : "You clicked Video001 from popup!!"
The browsers localstore is what you are looking for, a library like this one can help you to keep the data and on the main window you have a loop (setTimeout is your friend) that looks for new commands. All really simple to implement.
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.
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..