如何从另一个 iframe 更新 iframe？

Question

我有一个带有登录和注册按钮的 iframe，登录按钮在另一个 iframe 中打开登录页面，并在提交登录数据后刷新第二个 iframe。

但是，我还希望能够更新第一个 iframe 以将我的登录按钮更改为我的注销按钮。

$_SESSION['userlevel'] 确实有一个值，当使用 F5 刷新整个页面时，我的 loginmenu.php 可以很好地反映正确的按钮

这是我的索引页面的一部分，它加载了我的登录和注册按钮的代码...

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

这是我的 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>

验证用户名和密码后（$form 实际上是“有效”）...这是我更新 loginmenu.php 失败的尝试...

<?php

(validing code here)

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

(other php functions here)

?>

我也试过这个看看图像是否会改变，但它也失败了

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

Answer 1

为您的 iframe 命名，然后您可以从任何地方引用 iframe 中的窗口对象，如下所示：

var windowInIframe = top.frame_name;

如果使用此方法，则需要设置window.location.href 而不是src 才能将新页面加载到iframe。

Answer 2

试试这个..

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];
}  

参考此链接http://jsfiddle.net/mplungjan/WH4ns/