如何使用 onload 事件定位框架集的框架答案

【问题标题】：how to target a frame of a frameset with an onload event如何使用 onload 事件定位框架集的框架
【发布时间】：2016-05-29 05:02:47
【问题描述】：

我有一个这样的框架集：

<frameset rows="120px,100%">
<frame name="top" id="top" src="top.php" noresize frameborder="0" scrolling="no" />
<frame name="main" id="main" src="main.php" noresize frameborder="0" scrolling="yes" />

在我的 main.php 文件中：

<script>
function reload_top() {
    top.frames['top'].location.href= "http://www.google.com";
}
</script>

而main.php主体的onload事件为：

<body onload="reload_top();">

我想要实现的是，每次有人加载 main.php 时，该文件都会从顶部重新加载顶部框架 top.php，但到目前为止我只能让它脱离框架集并加载一个新页面...

我已经尝试过以下任何一种：

document.getElementById('top').src = "http://www.google.com";

window.top.location.href = "http://www.google.com";

top.frames['top'].location.href= "http://www.google.com";

它们都不起作用。我做错了什么？

谢谢

【问题讨论】：

标签： javascript php onload frames

【解决方案1】：

在这里尝试另一个答案，我们在框架集元素中使用 onload 事件

<html>
 <head>
 <title>Frame: Onload & Onunload Examples</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script language="JavaScript">
 <!--
  function testOnload() {
   // alert('OnLoad: Alert in testOnload() executed by onLoad property of frameset tag.');
  document.getElementById("top").src="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_frames2";
  }
 function testOnUnload() {
 //alert('OnUnload: Alert in testOnUnload() executed by onUnLoad property of frameset tag.')
  }
  //-->
  </script>
  </head>
   <frameset rows="80,*" frameborder="0" border="0" framespacing="0" 
   onLoad="javascript:testOnload()"   
   onUnload="javascript:testOnUnload(); alert('onUnload: alert in frameset tag')">
<frame name="topFrame" scrolling="NO" noresize src="https://developers.google.com/oauthplayground/" id="top">
<frame name="mainFrame" src="https://developers.google.com/oauthplayground/">
<noframes>
    <body bgcolor="#FFFFFF">
     <p>Sorry, this page needs a browser that supports frames.</p>
    </body>
</noframes>
</frameset>
</html>

【讨论】：

【解决方案2】：

作为信息，HTML5 不再支持框架标签。您要使用 iframe 在一个页面中加载不同的页面吗？

你无法设置frame位置的问题是当你尝试访问frame时它是未定义的

例如代码

<iframe id="topf" src="stacktop.php"></iframe>
<script>
     function reload_top() {
        var a = document.getElementById('topf');
         a.src = "http://www.aapastech.com";
    }
 </script>

【讨论】：

我不推荐使用区域框架，但我将我的 html 文档类型定义为 4.01，因为我需要它们用于这个项目。我尝试了您的解决方案，但没有奏效
出了什么问题？我尝试了解决方案。有效。您是否调试过在您设置 src 时是否可以访问该元素
您的示例可能有效，因为您使用的是 iFrame，但我指定我使用的是 Frameset，当我得到：“Uncaught TypeError: Cannot set property 'src' of null”跨度>

【解决方案3】：

Html5 不支持框架集，但使用 jquery 试试

 <!DOCTYPE html>
 <html>
 <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">        </script>
 <script>
 $(document).ready(function(){

        document.getElementById("top").src="http://yahoo.com";
 });
</script>
</head>
<frameset cols="25%,*,25%" id="abc">
 <frame src="http://www.google.com" id="top" name="top">
 <frame src="http://www.google.com">
 <frame src="http://www.google.com">
  </frameset>
 </html>

【讨论】：

我不推荐使用区域框架，但我将我的 html 文档类型定义为 4.01，因为我需要它们用于这个项目。我尝试了您的解决方案，但没有奏效

【解决方案4】：

经过一番挖掘，我发现从另一个框架定位一个框架的方法是使用：

parent.document.getElementById('frameName').src

所以我的函数现在可以工作了，看起来像这样：

<script>
    function reload_top() {
        parent.document.getElementById('top').src = "venues.php";
    }
</script>

感谢您的帮助。

【讨论】：