close iframe from within that iframe

guys, please forgive me if this is too newbie to be allowed here, but I really appreciate the help...

on my page, just testing for now, I have different links opening different iframes, it can be found here:

www.chrisjongkind.com/test2.htm

now I want to close each iframe with a 'close' link in THAT iframe, is this possible? all frames will eventually show my own content in my webspace, the yahoo link was just for testing a second link. but you can see the 'close' link text that I want to close that iframe, so that none appear. I have tried the simple stuff such as onclick="self.close();" and whatnot, but haven't found the right answer at all, anyone? again, sorry if this is the wrong forum or too stupid to appear, but thx all for reading...

chris j

 

There is nothing wrong is asking any kind of query in DP, we people shall discuss and trie to find a solution for it, so feel free to ask any kind of question its a very big community here, some people are highly experienced in this forum, I googled your question and found a very good link try this http://blogs.x2line.com/al/articles/350.aspx

 

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);
}

Code (markup):

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

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

Code (markup):

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

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

Code (markup):

Hope it helps...

 

thx both for the advice...

I have tried one of your ideas, not using the function and instead putting it all in the href, and it did do something, but still not what I was after; now when I click close I get my error page (file not found essentially), the link is still here:

http://chrisjongkind.com/test2.htm

I put id="testfr" in the main page in the iframe tag, and then testfr in the positions in the line you showed me, I think correctly? also, I have a div in the main page called 'fr1', would that be of any help? I mean if I can close that it would accomplish the same thing perhaps?
let me know if there is anything else I can try? I also tried the function but nothing changed....

thanks a lot guys,

chris j

 

Ah, you're missing one importante thing the javascript part of the link, my bad, i forgot to put that in the link:

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

Code (markup):

Sorry again.

Cheers

 

hrcerqueira!

thx a lot, that did the trick, and the window now closes when I click on 'close'. this of course gives me a new question; once closed, when I click on the link again, it won't come back! is there a way I can have the links clickable more than once?

thx a lot and no rush at all,

chris j

 

Ah, i thought that the IFRAME was generated on the fly. Looks like it's hidden... Are you sure you want to do that? Because if you're going to have lots of those iframes in one web page, you are loading them all from the start, even if the user only sees one...

Anyway, here's what you have to do, to keep this system:

Change function openFrame:

function openFrame(frm) {
            for( i=1; i<3; i++) document.getElementById('fr'+i).style.display="none"';
            var openFrame = document.getElementById(frm);

            if ( openFrame.style.display == 'none' ) {
                        openFrame.style.display == 'block';
            } 

            else {
                        openFrame.style.display == 'none'
            }
}

Code (markup):

Also, don't use the classnames visible and hidden on the div elements, use style="display: none" instead.

The link now should look something like:

<a href="javascript: window.parent.document.getElementById('fr1').style.display='none'">Close</a>

Code (markup):

 

hrcerqueira,

thx a lot for your help so far. I haven't implemented this yet, because of your warning about load times. I would be happy to alter my pages so that it runs the most efficiently, can you assist me? I think you can see what I want to do; have some links on a page (about 10) that when clicked, open individual .htm in their own small iframe, each with a close button. and if a new one is clicked on, open the new one and close the previous.

thx again and no rush at all, I'm very grateful to you and anyone who takes a look...

chris j

 

Just a small question, the pages you're opening, are all in the same domain?

 

yep, all will be same domain (yahoo page was just for testing). they'll all be little .htm files of my own making and on same domain.

 

Perfect then. Ajax is your tool for the job.

Here's a quick guide. google for the word SACK, click on the first link and download the sack file. Then include it on your file. Then, instead of having multiple div elements for multiple frames, use only one div element with id for example 'ajaxfr', that will be inside another one, for example, 'windowfr'.

Now put this script on your page (the first line is some piece of html indicating that a page is being loaded, replace it by anything you want):

var loadingHTML = '<p>Loading...</p>';

function AjaxRequest(url) {
   var s = new sack(url);
   var self = this;

   s.onCompletion = function() {self.complete()};

   this.run = function() {
      if (s.response) {
         this.complete();
         return;
      }

      s.runAJAX();
      document.getElementById('ajaxfr').innerHTML = loadingHTML;
   }
   
   this.complete = function() {
      document.getElementById('ajaxfr').innerHTML = s.response;
   }
}

Code (markup):

Now you have to set up the ajax links:

var page1 = new AjaxRequest('/path/to/page1.html');
var page2 = new AjaxRequest('/path/to/page2.html');
.......

Code (markup):

Now, replace your openFrame by this one:

function openFrame() {
   document.getElementById('windowfr').style.display == 'block';
}

Code (markup):

And add a closeFrame function:

function closeFrame() {
   document.getElementById('windowfr').style.display == 'none';
}

Code (markup):

Your 'ajaxfr' and 'windowfr' can look something like this now:

<div style="location: absolute; left: 50px; top: 50px; width: 150px; height: 300px; display: none" id="windowfr">
   <div align="right"><a href="javascript: closeFrame();">close</a></div>
   <div id="ajaxfr" />
</div>

Code (markup):

As you can see, now the close link is on the main page, you don't need to add it on the small pages. Adjust the style settings to your needs.

Now your links can look something like this:

<a href="javascript: openFrame(); page1.run();">page 1</a>
<a href="javascript: openFrame(); page2.run();">page 2</a>

Code (markup):

This is very basic stuff, and came out from my head right now, I hadn't tested it, but I did so many times that I'm 99% sure it will work.

Hope it helps...

 

I forgot to say one thing. The small pages, the one you're loading through ajax calls, don't need to have the html, head and body tags, neither you need to attach any style sheets. If you have a class named 'someclass' in the main file and have some element with classname 'someclass' in the small files, that will work just fine, and you don't need to redeclare the style.

All you need to have in the small files is the body content...

 

hrcerqueira,

thanks a lot for your thorough explanation....I will be trying it out this week and will get back to you on my progress!

thanks again, seriously,

chris j

 

You're welcome :-D

 

Hello, I am trying to do pretty much the exact same thing as Chris except only with one iframe. I need the frame to be hidden by default and then shown when the user clicks a link and then hidden again when the user clicks close. I also need the link to be able to be opened again after it is closed like the original poster. I looked over the code given on this site as well as Chris's page (www.chrisjongkind.com/test2.htm) and despite everything I try I can not get it to work with just one iframe. I think it has something to do with the 'fr'+i or fr1, fr2 or similar but I really know very little about javascript. Any help would be appreciated.

Thanks.

 

If all you want to do is to add an IFRAME, define your iframe like this:

<div id="someid" style="position: absolute; width: 300px; height: 300px; left: 50px; top: 50px; display: none">
<iframe src="/path/to/iframe"></iframe>
</div>

Code (markup):

And use the inside the iframe the link defined in the third piece of code of the third post of this thread, to close it.

This will work as is, but change "someid" and the style attributes to serve your needs.

Hope it helps.
create the show function:

<script>
function openIframe() {
   document.getElementById('someid').style.display = '';
};
</script>

Code (markup):

define the open link:

<a href="javascript: openIframe();">Open</a>

Code (markup):

 

I have tried what hrcerqueira suggested so far and I can get the iframe to show and then hide but I can not get it to show again after it has been hidden without refreshing the page. Does anyone know if it is possible to have my iframe show and hid over and over without refreshing.

thank you for your help.

 

Okay, I still can not get my page to show the iframe more than once. I reread the posts a few more times and made some changes and now when I show the iframe then hide it then try to show it again the link just displays the word "none". I know basicaly nothing about javascript so I am going to post what I have below in hope that someone can help.

For the main page I have

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Show</title>

<script type="text/javascript">
function openIframe() {
   document.getElementById('drop').style.display = 'block';
};
</script>

</head>

<body>
<div align="center"><a href="javascript: openIframe();">Test Show</a>
</div>
<div id="drop" style="display: none">
<iframe src="fileb.html" height="400" width="400" frameborder="0" class="location" scrolling="no"></iframe>
</div>
</body>
</html>

Code (markup):

and for the iframe I have

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Hide</title>

<style type="text/css">
<!--
body {
	background-color: #999999;
}
-->
</style></head>

<body>
<div align="center"><a href="javascript: window.parent.document.getElementById('drop').style.display = 'none'">Test Hide</a>
</div>
</body>
</html>

Code (markup):

also for the iframe page above (second set of code) I would rather not include everything in the link and instead would like to display it in the head. Is that possible like on first example.

Can someone who knows javascript look this over please and let me know what I am doing wrong.

Thank you very much.

 

Hello

Try the following, create another function on the parent frame:

function closeIframe() {
	document.getElementById('drop').style.display = 'none';
}

Code (markup):

and change the link:

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

Code (markup):

Now it should work. And uf you don't want the content of the links to show up in the status bar, add onmouseover="return true". Should look like this:

<a href="javascript: window.parent.closeIframe()" onmouseover="return true;">Test Hide</a>

Code (markup):

Hope it helps.

 

Thank you so, so much. Your help is greatly appreciated and it works great.