Iframe Quickie

I have a page containing iframes. How can I create links on the outside page to act as forward, backward, stop, and refresh buttons for an iframe without refreshing the entire page?
********************************
*                              *
*  *************************   *
*  *                       *   *
*  *        iframe         *   *
*  *                       *   *
*  *************************   *
*                              *
* <BACK> <FWD> <STOP> <REFRSH> *
********************************
Thanks in advance
LVL 1
slydonAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
kollegovConnect With a Mentor Commented:
Ohhh, sorry, I forgot this is IFRAME
and made solution for FRAME instead.

For iframe you can do stop as this:

<html>
<script>
function doStop(){
d=document.all['myIFrame'].innerHTML='';
d.open();
d.close();
}
</script>


<iframe NAME="myIFrame">
</iframe>
<a href="javascript:void(0)"
onClick="doStop(); return false;"
>stop</a>

<a href="http://www.yahoo.com" target="myIFrame">Yahoo</A>
</html>

Click Yahoo link, and than try stop link :)
0
 
knightEknightCommented:
For example:

<IFRAME name='myIFrame' ...>

<INPUT type='button' value='Back' onClick='self.myIFrame.history.go(-1);'>

<INPUT type='button' value='Forward' onClick='self.myIFrame.history.go(1);'>

0
 
slydonAuthor Commented:
It doesn't work. I get an "access denied" error. I don't know why.
Any ideas?


-Sean
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
kollegovCommented:
You can't access histoy object if
document in frame document is in other domain.. This is security restriction Inside the same domain, everything work OK

BUT! knightEknight suggested not working solution :)
note that MIE5 do not create history separate for iframes, I used
window.history.go(-1);
Also You must return false from onclick;
otherwise MIE reloads current location back.

This one tested with MIE5/Win NT

<HTML>
<HEAD>
</head>
<body>
 <iframe name="ifr" src="some.html" width=200 height=300>
 </iframe>
<a href="javascript:void(0);" onClick="window.history.go(-1);return false;">back</a>
<a href="javascript:void(0);" onClick="window.history.go(1);return false;">fwd</a>
</BODY>
</HTML>

0
 
slydonAuthor Commented:
It still doesn't work. Also, where is the iframe being referenced in the link?
-Sean
0
 
jmtt13Commented:
I would do it this way, with three links. Make sure you test it in IE 5 first 'cause I know it works there!

<a href="#" onClick="window.location.href='history.back(1)'">Back</a>

<a href="#" onClick="window.location.href='history.forward(1)'">Forward</a>

<a href="#" onClick="window.location.replace(window.location);">Reload</a>

The stop button would be pretty hard to do in JavaScript... I know about the onAbort event handler, but I don't know if you can call a reverse function TO abort the page loading... Sorry.
0
 
jmtt13Commented:
WAIT... there's a problem with that code... I'll have the new code here within 10 minutes!
0
 
jmtt13Commented:
OK, here's the final code for the three links:

<input type="button" value="&lt;&lt; Go back" onClick="location='javascript:history.back(1)';">
<input type="button" value="Reload" onClick="window.location.replace(window.location);">
<input type="button" value="Go forward &gt;&gt;" onClick="location='javascript:history.forward(1)';">

It's a little messy, but it oughta work for you.  Tell me if it doesn't and I'll make some revisions.

PS: this will work inside an IFRAME on IE because every action is stored in history, not just the last physical page.   ;)
0
 
jmtt13Commented:
OK, so I haven't tested this yet but it should work for you if the other doesn't:

<input type="button" value="&lt;&lt; Go back" onClick="window.history.back();">
<input type="button" value="Reload" onClick="window.location.reload();">
<input type="button" value="Go forward &gt;&gt;" onClick="window.history.forward();">
0
 
jmtt13Commented:
Yes, I think that the code above it the best.  Whoa! sorry for all these comments... THIS IS THE LAST ONE
0
 
kollegovCommented:
in MIE window.location.replace(window.location) wouldn't RELOAD it will use cached copy..

this one, will reload:

window.location.replace(window.location?)

And BTW stop ca be done with history.go(0);

The rest is the same, no much difference between go(-1) and back(1)
and go(1) and forward(1)
so I'm not sure what jmtt13 added new
exept wrong way to reload
????

<input type="button" value="&lt;&lt; Go back" onClick="location='javascript:history.back(1)';">
               <input type="button" value="Reload" onClick="window.location.replace(window.location?);">
<input type="button" value="Go forward &gt;&gt;" onClick="location='javascript:history.forward(1)';">

<input type="button" value="Stop" onClick="history.go(0);">
0
 
kollegovCommented:
in MIE window.location.replace(window.location) wouldn't RELOAD it will use cached copy..

this one, will reload:

window.location.replace(window.location+'?')

And BTW stop ca be done with history.go(0);

The rest is the same, no much difference between go(-1) and back(1)
and go(1) and forward(1)
so I'm not sure what jmtt13 added new
exept wrong way to reload
????

<input type="button" value="&lt;&lt; Go back" onClick="location='javascript:history.back(1)';">
               <input type="button" value="Reload" onClick="window.location.replace(window.location?);">
<input type="button" value="Go forward &gt;&gt;" onClick="location='javascript:history.forward(1)';">

<input type="button" value="Stop" onClick="history.go(0);">
0
 
kollegovCommented:
Opsss, should be
window.location.replace(window.location+'?')
Missed it in code too..


<input type="button" value="&lt;&lt; Go back" onClick="location='javascript:history.back(1)';">
                              <input type="button" value="Reload" onClick="window.location.replace(window.location+'?');">
               <input type="button" value="Go forward &gt;&gt;" onClick="location='javascript:history.forward(1)';">

               <input type="button" value="Stop" onClick="history.go(0);">



BTW, Sean, answer you rejected I was testing under MIE5/WinNT.. and it worked, may be your problem not in this part of code, but somewhere else?
0
 
kollegovCommented:
Well that's what I tested right now on MIE5/Win95 and this work fine...

<iframe name='ifr' src="kaka.html">
</iframe>
<input type="button" value="Go back" onClick="history.go(-1);">
<input type="button" value="Reload" onClick="ifr.location.replace(window.ifr.location+'?');">
<input type="button" value="Go forward" onClick="history.go(1);">
<input type="button" value="Stop" onClick="history.go(0);">

Less code, do more :-)
0
 
jmtt13Commented:
sorry kollegov

history.go(0) stops the page... Cool, I didn't know that.
0
 
kollegovCommented:
history.go(0) do refresh. In this case cached copy will be used. Sure it's not the same as 'STOP' button, which interrupts loading of current document, but at least it stops connection, and use current location document from cache.
0
 
kollegovCommented:
jmtt13, BTW why you used
onClick="location='javascript:history.forward(1)';"

why not just
onClick="history.forward(1)';"

:?)

Virtual_Max
0
 
jmtt13Commented:
kollegov:

If you noticed, a couple comments up I suggested:

<input type="button" value="&lt;&lt; Go back" onClick="window.history.back();">
<input type="button" value="Reload" onClick="window.location.reload();">
<input type="button" value="Go forward &gt;&gt;" onClick="window.history.forward();">

Which does not include the bad code.
0
 
slydonAuthor Commented:
history.go(0) refrehes the page, it doesn't stop the page from loading. Is there any way for it to act like a STOP button?
Thanks
0
 
kollegovCommented:
Actually there is no direct analog for "stop" button.

As I mentioned go(0) will break connection opening and return to current page (cached copy will be used)
this will work if new connection not opened yet. If opened, than this will refresh document..

In case both frames are in the same
domain you can use this trick to stop
<script>
 function doStop(framename){
  d=parent.frames[framename].document;
  d.open();
  d.close();
 }
</script>

But again this will not be 100% equivalent of 'stop' button as partitially loaded content will be erased.

This would give security errors
"Access denied" in case of documents are on different servers.
0
 
slydonAuthor Commented:
I tried the script, and it didn't recognize the frame name
"content is undefined"
The frameset is an HTA.. an content is application=no

Thanks for the help
-Sean
0
 
slydonAuthor Commented:
It sounds right.. the iframe idea was abandoned at work *sigh* Wish they'd told me 2 months earlier
Still, thanks for all the help
0
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.

All Courses

From novice to tech pro — start learning today.