How to close iframe inside iframe
Posted By : Sushrita Banerjee | 12-Nov-2014
Assume we have a page which is opening an iframe as a popup i.e.,
<!-- Main Page --> <a id='A2' href='#' data-featherlight='#FEeditItems' <asp:literal id='caned2' runat="server" /> class='lbuttonbig'>Edit Items</a> <iframe class="lightbox edit-item-form" src="EditItems.aspx" id="FEeditItems" style="border:none;"><asp:Label ID="EditItem" runat="server"></asp:Label></iframe>
And inside that iframe we are opening another iframe, to add some field like,
<!-- EditItems.aspx --> <body class="edit-item-form"> ... <a id='A22' href="#" data-featherlight='#FAddSubCatg' <asp:literal id='caned00' runat="server" /> class="tooltips"> <img src="new-modif-css/img/add-small.png" alt="Add" /> </a> ... <iframe class="lightbox edit-item-form" src="AddSubCategory.aspx" id="FAddSubCatg" style="border:none;"><asp:Label ID="AddSubCat" runat="server"></asp:Label></iframe> ... </body>
So, the last iframe here is,
<!-- AddSubCategory.aspx --> <body> ... </body>
1st Method:
Now for closing the last iframe viz, AddSubCategory.aspx we can use the below described method inside the AddSubCategory.aspx page,
<script>
$('#CancelCatBtn').on('click', function () {
console.log(window, window.parent, window.parent.document);
$('iframe-id', window.parent.document).hide();
});
</script>
2nd Method:
Or, we can also create a function in parent iframe viz, EditItems.aspx page, like
function closeIframe()
{
$('iframe-id').fadeOut(500,'swing');
}
And calling this method from child iframe viz, AddSubCategory.aspx page, like
$('#CancelCatBtn').on('click', function () {
parent.closeIframe();
});
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Sushrita Banerjee
Sushrita is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.