asked on

Work with two iframes...

Hello,

How to work with two iframes in a page and how to work with historic generated by each one separately.
I used: document.frames ("iframe name"). history.go (-1) ; to back for example, but not worked.

Thanks.

Michel Plungjan

document.frames is not correct (at least not in all browsers)
window.frames["iframe_name"] is more correct assuming the frame has a NAME and not just ID
If you have ID you can use document.getElementById('iframe_id").history

Rybius

ASKER

Using window.frames["iframe_name"] the error was - "Member not found" in IE and Chrome took the history of the whole page, not only the history of the Iframe.
Using document.getElementById('iframe_id").history, the error was "access denied".

Michel Plungjan

Sorry. Cannot help without seeing the actual frame code

If the content of the frames are not from the exact same server (same port, same protocol) you will get issues with security.

My suggestion is to rethink your approach (ajax plus proxy perhaps) to not need to manipulate the history at all

Rybius

ASKER

Hi,

This is my code:

<!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 runat="server">
<title></title>

<script language="javascript" type="text/javascript">

function Back(frame_name) {

window.frames[frame_name].history.back();
}

function Forward(frame_id) {
document.getElementById(frame_id).history.go(1);
}
</script>

</head>
<body>
<form id="form1" runat="server">

<div id="iframe1">
<div class="btn_iframe">
<input type="button" onclick="Back('iframe1')" value="back"/>
<br />
<input type="button" onclick="Forward('IF1')" value="forward"/>
</div>
<iframe src="http://www.microsoft.com" heigth="100%" width="100%" frameborder="0" id="IF1" name="iframe1" style="height: 277px"></iframe>
</div>

<div id="iframe2">
<div class="btn_iframe">
<div class="btn_iframe">
<input type="button" onclick="Back('iframe2')" value="back"/>
<br />
<input type="button" onclick="Forward('IF2')" value="forward"/>
</div>
</div>
<iframe src="http://www.google.com" heigth="100%" width="100%" frameborder="0" id="IF2" name="iframe2" style="height: 277px"></iframe>
</div>

</form>
</body>
</html>

Thanks!

Michel Plungjan

well firstly you cannot frame google:

Error: uncaught exception: Not exactly Luddite, but we are frame-busting.

Back works if I use BING so try window.frames for forward too

There is not necessarily a history object available to you and as I mentioned do not try this if the content of the frames are not from the same server, port and protocol as the frameset

Rybius

ASKER

Hello,

I understand that I can only work with Iframe within the domain of my site.

But even pages using the same server, using the same port, it takes the history of the browser, not the history of each iframe, using back and forward according to the name of the Iframe.
Is there a way to get two iframes on a page and navigate through them separately?
Can you help me?

Thank you!

Michel Plungjan

This works for me from my harddisk in IE8, FF 3.6.6 and Safari 5 on XP

You of course need to FIRST navigate in the iframes by clicking a link to page2 and pageb

<!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 runat="server">
    <title></title>

  <script language="javascript" type="text/javascript">

      function Back(frame_name) {
         
          window.frames[frame_name].history.back();
         }

      function Forward(frame_name) {
          window.frames[frame_name].history.go(1);
      }  
  </script>

</head>
<body>
    <form id="form1" runat="server">

        <div id="iframe1">
                <div class="btn_iframe">
                    <input type="button" onclick="Back('iframe1')" value="back"/>
                    <br />
                    <input type="button" onclick="Forward('iframe1')" value="forward"/>
                </div>
            <iframe src="page1.html" heigth="100%" width="100%" frameborder="0" id="IF1" name="iframe1" style="height: 277px"></iframe>
         </div>

         <div id="iframe2">
            <div class="btn_iframe">
                <div class="btn_iframe">
                    <input type="button" onclick="Back('iframe2')" value="back"/>
                    <br />
                    <input type="button" onclick="Forward('iframe2')" value="forward"/>
                </div>
            </div>
            <iframe src="pagea.html" heigth="100%" width="100%" frameborder="0" id="IF2" name="iframe2" style="height: 277px"></iframe>
         </div>    
       
    </form>
</body>
</html>

Open in new window

Rybius

ASKER

Hi,

I can not understand.
I also use XP, I tested in IE8, FF, Chrome and they do not use the name of the iframe to access the page history.
For example, I navigated on the iframe1- page1.html for page2.html
and after navigated in the iframe2 - pagea.html for pageb.html
and I clicked on the back button of the iframe1. So, it returned to the pageb.html for pagea.html on the frame2, It's means, they are using the history of the browser and not based on the history of the Iframe name.

Thanks!

Michel Plungjan

Ahh, I see now!

Sorry

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rybius

ASKER