1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Closing iframe from parent or child. How?

Discussion in 'JavaScript' started by Vvardenfell, Feb 25, 2016.

0
  1. #1
    Hello there!

    I've been looking around almost everywhere and I found this topic: https://forums.digitalpoint.com/threads/close-iframe-from-within-that-iframe.582469/

    I am basically looking for the same thing but with a little change: I want to add a close button to close an iframe from either parent or child, using javascript, and to make the button disappear after the iframe is closed.

    I tried one of the solutions in the thread. This one:
    <a href="javascript: window.parent.document.getElementById('closeButton').parentNode.removeChild(window.parent.document.getElementById('closeButton'))">X</a>
    Code (markup):
    Now when the button is clicked it does close the iframe, but then the browser immediately takes me to:
    javascript: window.parent.document.getElementById('xbutton').parentNode.removeChild(window.parent.document.getElementById('xbutton'))
    Code (markup):
    ..with a browser message that says:
    [object HTMLIFrameElement]
    Code (markup):
    What am I doing wrong? I'm using Waterfox/Firefox 64-bit, and I'd like it to work on both Chrome and Firefox. [It did work on Chrome].

    Hoping to find a solution to this. Thank you!
     
    Vvardenfell, Feb 25, 2016 IP
  2. Vvardenfell

    Vvardenfell Member

    Messages:
    17
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #2
    I have finally got it to work in both browsers. Use onclick instead of href in either an <a> or a <button> tag:
    Now that leaves the closing button which is still there after closing the iframe. Any ideas on how to get it removed on click as well?
     
    Vvardenfell, Feb 25, 2016 IP
  3. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #3
    This should work for you (in jquery though):

    http://jsfiddle.net/vtFQx/100/

    The code:

    
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<style type="text/css">
#list {
overflow: auto;
}
#list li {
float: left;
margin-right: 10px;
}
div {
width: 450px;
height: 380px;
border: 1px solid gray;
position: relative;
}
iframe {
width: 450px;
height: 380px;
border: 1px solid black
display: block;
}
span.button {
position: absolute;
left: 0;
top: 0;
background-color: black;
padding: 5px 10px 5px 10px;
color: white;
cursor: pointer;
}
div.close {
display: none;
}
</style>
<script type="text/javascript">
$(function(){
$('#list div').each(function() {
$(this).append('<span class="button">Close</span>');
});
$("span.button").click(function() {
$(this).closest("li").children("div").toggleClass("close");
});
});
</script>
</head>
<body>
<ul id="list">
<li>
<div>
<iframe src="http://www.thinkstockphotos.co.uk/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg" scrolling="no" frameborder="0"></iframe>
</div>
</li>
</ul>
</body>
</html>
    Code (markup):
     
    qwikad.com, Feb 25, 2016 IP