Improve company productivity with a Business Account.Sign Up

x
?
Solved

Javascript iframe close

Posted on 2011-03-21
5
Medium Priority
?
654 Views
Last Modified: 2012-05-11
Hello,

I would like close an Iframe from an html button onclick event inside the iframe. I tried the below but no luck, any help is greatly appreciated!

<iframe id="xyz">
    <button type="submit" onclick="javascript:window.parent.closeFrame();</button>
</iframe>

0
Comment
Question by:cgray1223
  • 2
  • 2
5 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 35186780
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 35186782
0
 
LVL 20

Expert Comment

by:Rikin Shah
ID: 35186864
<iframe id="xyz">
    <button type="submit" onclick="javascript:document.getElementById('xyz').style.display='none';</button>
</iframe>

Open in new window

0
 
LVL 10

Accepted Solution

by:
khan_webguru earned 2000 total points
ID: 35187189
Hello bro!

You need to assign an id to your iframe, like <iframe id="someid"...

Then you need a function to remove the iframe:

 
function closeIframe() [
   var iframe = document.getElementById('someid');
   iframe.parentNode.removeChild(iframe);
}

Open in new window


Finaly, you need to call it from the iframe, like:

 
<a href="javascript: window.parent.closeIframe()">Close</a>

Open in new window


Or you can forget the function and use a long link like this:

 
<a href="javascript: window.parent.document.getElementById('someid').parentNode.removeChild(window.parent.document.getElementById('someid'))">Close</a>

Open in new window


For more help you can view these blogs

http://forums.devarticles.com/javascript-development-22/overwrite-self-close-function-in-iframe-46277.html

http://www.webdeveloper.com/forum/showthread.php?t=105049

Hope this will help you to solve your problem.

Regards,

Asif Ahmed Khan
0
 
LVL 10

Expert Comment

by:khan_webguru
ID: 35300700
any success??
0

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
AngularJS web development a very simple procedure. So, to put it, in short, AngularJS’ stand out features are – Two-way data binding, MVC structure, directives, templates, dependency injections and testing.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

606 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question