How do I update an iframe from another iframe?

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

문제

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
 }
도움이 되었습니까?

해결책

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.

다른 팁

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/

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top