?
Solved

Iframe Quickie

Posted on 2000-04-20
22
Medium Priority
?
337 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 7
  • 5
  • +1
22 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 2736606
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
ID: 2736664
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
ID: 2736819
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

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

Expert Comment

by:jmtt13
ID: 2737701
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
ID: 2737705
WAIT... there's a problem with that code... I'll have the new code here within 10 minutes!
0
 

Expert Comment

by:jmtt13
ID: 2737717
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
ID: 2737724
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
ID: 2737732
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
ID: 2737835
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
ID: 2737839
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
ID: 2737850
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
ID: 2737878
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
ID: 2738100
sorry kollegov

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

Expert Comment

by:kollegov
ID: 2739772
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
ID: 2739781
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
ID: 2740011
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
ID: 2760856
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
ID: 2761869
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
ID: 2781872
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 400 total points
ID: 2783870
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
ID: 2821739
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
Suggested Courses

771 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