How to create a button inside an iframe to close it

Question

How to create a button inside an iframe to close it

Navigation

#1 by (4 votes)
#2 by (0 votes)
#3 by (0 votes)

2

I needed to create a button inside a iframe in a corner to close it. I have a gallery of images and when clicking on an image will open a iframe , the following code already does this.

But now I needed to create a button in a corner inside iframe (preference in the upper right corner) when pressed the button would have to close iframe . Attention to the pages that I'm going to open for iframe I do not have access to the code. E After closing iframe through the button it should be possible to reopen it by clicking on the image gallery.

Any idea how I can do it?

I have the following code already done:

<div class="gallery">
  <a target="iframe1" href="https://www.google.pt">
    <img src="images\pt.png" alt="PT" width="300" height="200">
  </a>
  <div class="desc">Google PT</div>
</div>

<div class="gallery">
  <a target="iframe1" href="https://www.google.co.uk/">
    <img src="images\en.png" alt="EN" width="300" height="200">
  </a>
  <div class="desc">Google EN</div>
</div>

<div id="nav">
  <iframe name='iframe1' id='link' width="800" height='500' style="border:none;"></iframe>
</div>

html iframe

asked by anonymous 11.09.2017 / 13:54

3 answers

0

This code needs to use jquery.

If the iframe does not exist, then in the page you call in the iframe make the button and put the id of the element you want to remove this way:

$(function(){
     $("#id_do_botao_fechar").click(function() {
          $("#id_elemento").remove();
     });
});

But if you really want to remove the iframe:

$(function(){
     $("#id_do_botao_fechar_fora_do_iframe").click(function() {
          $("#nav").empty();
     });
});

So it will remove everything inside the tag with "nav" id.

11.09.2017 / 14:19

0

With the help and response of @AndersonCarlosWoss I was able to reach this result:

function closeiframe() {
  document.getElementById("nav").style.display = "none";
}

function openiframe() {
	document.getElementById("nav").style.display = "inherit";
}

.iframe {
  osition: relative;
}

.iframe button {
  position: absolute;
	right: 10px;
	top: 10px;
	color: red;
}

<div class="gallery">
  <a target="iframe1" href="https://pt.wikipedia.org/wiki/Wikipédia:Página_principal" onclick="openiframe()">
    <img src="images\test1.png" alt="test1" width="300" height="200">
  </a>
  <div class="desc">test1</div>
</div>

<div class="gallery">
  <a target="iframe1" href="https://pt.wikipedia.org/wiki/Wikipédia:Boas-vindas" onclick="openiframe()">
    <img src="images\test2.png" alt="test2" width="300" height="200">
  </a>
  <div class="desc">test2</div>
</div>

<div id="nav">
	<iframe name='iframe1' id='link' width="800" height='500' style="border:none;"></iframe>
	<button onclick="closeiframe()">X</button>
</div>

12.09.2017 / 13:25

Is there a difference between using backslash and simple? Vector ascending order c # [closed]

score 4 · Accepted Answer

If the button's function is to just hide the iframe, I do not see why you insert it into it; you can create the button on your page and just position it on the iframe, in the desired position. Here's an example:

.iframe {
  position: relative;
}

.iframe button {
  position: absolute;
  right: 10px;
  top: 10px;
  color: red;
}

<div class="iframe">
  <iframe src="https://vignette.wikia.nocookie.net/hitchhikers/images/2/2f/The-Hitchhikers-Guide-to-the-Galaxy-586-5.jpg/revision/latest?cb=20110623191658"frameborder="0" width="100%" height="480"></iframe> 
  <button onclick="this.parentElement.style.display='none';">X</button>
</div>

Notice that button is set on your own page, not needing to define it within the iframe.