Solved

Iframe Quickie

Posted on 2000-04-20
22
322 Views
Last Modified: 2012-06-27
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
0
Comment
Question by:slydon
  • 9
  • 7
  • 5
  • +1
22 Comments
 
LVL 33

Expert Comment

by:knightEknight
Comment Utility
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
 
LVL 1

Author Comment

by:slydon
Comment Utility
It doesn't work. I get an "access denied" error. I don't know why.
Any ideas?


-Sean
0
 
LVL 10

Expert Comment

by:kollegov
Comment Utility
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
 
LVL 1

Author Comment

by:slydon
Comment Utility
It still doesn't work. Also, where is the iframe being referenced in the link?
-Sean
0
 

Expert Comment

by:jmtt13
Comment Utility
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
 

Expert Comment

by:jmtt13
Comment Utility
WAIT... there's a problem with that code... I'll have the new code here within 10 minutes!
0
 

Expert Comment

by:jmtt13
Comment Utility
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
 

Expert Comment

by:jmtt13
Comment Utility
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
 

Expert Comment

by:jmtt13
Comment Utility
Yes, I think that the code above it the best.  Whoa! sorry for all these comments... THIS IS THE LAST ONE
0
 
LVL 10

Expert Comment

by:kollegov
Comment Utility
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
 
LVL 10

Expert Comment

by:kollegov
Comment Utility
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 10

Expert Comment

by:kollegov
Comment Utility
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
 
LVL 10

Expert Comment

by:kollegov
Comment Utility
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
 

Expert Comment

by:jmtt13
Comment Utility
sorry kollegov

history.go(0) stops the page... Cool, I didn't know that.
0
 
LVL 10

Expert Comment

by:kollegov
Comment Utility
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
 
LVL 10

Expert Comment

by:kollegov
Comment Utility
jmtt13, BTW why you used
onClick="location='javascript:history.forward(1)';"

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

:?)

Virtual_Max
0
 

Expert Comment

by:jmtt13
Comment Utility
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
 
LVL 1

Author Comment

by:slydon
Comment Utility
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
 
LVL 10

Expert Comment

by:kollegov
Comment Utility
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
 
LVL 1

Author Comment

by:slydon
Comment Utility
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
 
LVL 10

Accepted Solution

by:
kollegov earned 100 total points
Comment Utility
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
 
LVL 1

Author Comment

by:slydon
Comment Utility
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

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery, dropdown 4 33
Form submit issue 11 51
Summernote and form validation 10 37
es6 typescript how to filter an array 10 34
Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now