How do I update an iframe from another iframe?

StackOverflow https://stackoverflow.com/questions/21898492

Pergunta

I have an iframe with LOGIN and REGISTER buttons, the login button opens the login page in another iframe, and after submitting the login data the second iframe is refreshed.

However, I would like to be able to also update the first iframe to change my LOGIN button to my LOGOUT button.

$_SESSION['userlevel'] does have a value, and my loginmenu.php works fine to reflect the correct button when the whole page is refreshed with F5

here is part of my index page which loads the code for my LOGIN and REGISTER buttons ...

   <div class="login">
    <iframe class="iframemain" name="iframe-login" id="loginmenu" src="loginmenu.php"></iframe>
   </div>

here is my loginmenu.php ...

<?php session_start();?>

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" href="0000001.css" type="text/css" />
<title> </title>
</head>

<body class="login">
<?php
$userlevel=$_SESSION['userlevel'];

if ($userlevel=="") 
{
 ?><a href="login.php" target="iframemain"><img id="loginImg" src="gfx/btn.menulogin.png"/></a><img src="gfx/spacer.png" width="2px"/><a href="register.php" target="iframe-body"><img src="gfx/btn.menuregister.png"/></a><?php
}

if ($userlevel<>"") 
{
 ?><a href="logout.php" target="iframemain"><img src="gfx/btn.menulogout.png"/></a><img src="gfx/spacer.png" width="2px"/><a href="register.php" target="iframe-body"><img src="gfx/btn.menuregister.png"/></a><?php
}

?>

</body>

</html>

after validating the username and password ($form is actually "valid") ... here is my failing attempt to update my loginmenu.php ...

<?php

(validing code here)

if($form=="valid")
 {
  ?>
  <script>
  element=document.getElementById('loginmenu')
  element.src="loginmenu.php";
  </script>
  <?php
 }

(other php functions here)

?>

i have also tried this to see if the image will change, but it also fails

if($form=="valid")
 {
  ?>
  <script>
  element=document.getElementById('loginImg')
  element.src="gfx/btn.menulogout.png";
  </script>
  <?php
 }
Foi útil?

Solução

Give names to your iframes, then you can refer the window objects in iframes from anywhere like so:

var windowInIframe = top.frame_name;

If you use this method, you need to set window.location.href instead of src to load a new page to an iframe.

Outras dicas

try this..

var links = [
    'javascript:\'<button onclick="parent.twonav(1)">Change 2nd frame</button>\'',
    'javascript:\'Hello\''
];
var one, two;
window.onload=function() {
  one = document.getElementById('frameone');
  two = document.getElementById('frametwo');
}  

function onenav(idx) {
    one.src=links[idx];
}  

function twonav(idx) {
    two.src=links[idx];
}

Refer this link http://jsfiddle.net/mplungjan/WH4ns/

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top