如何使用 onload 事件定位框架集的框架
how to target a frame of a frameset with an onload event
我有这样的框架集:
<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";
None 其中有效。
我做错了什么?
谢谢
请注意,HTML5 不再支持 frames 标签。您想使用 iframe 在一个页面中加载不同的页面吗?
你无法设置框架位置的问题是因为当你尝试访问框架时它是未定义的
例如代码
<iframe id="topf" src="stacktop.php"></iframe>
<script>
function reload_top() {
var a = document.getElementById('topf');
a.src = "http://www.aapastech.com";
}
</script>
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>
在这里尝试另一个答案我们在框架集元素中使用 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>
经过更多的挖掘,我发现从另一个帧定位一个帧的方法是使用:
parent.document.getElementById('frameName').src
所以我的函数现在可以工作了,看起来像这样:
<script>
function reload_top() {
parent.document.getElementById('top').src = "venues.php";
}
</script>
感谢您的帮助。
我有这样的框架集:
<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";
None 其中有效。 我做错了什么?
谢谢
请注意,HTML5 不再支持 frames 标签。您想使用 iframe 在一个页面中加载不同的页面吗?
你无法设置框架位置的问题是因为当你尝试访问框架时它是未定义的
例如代码
<iframe id="topf" src="stacktop.php"></iframe>
<script>
function reload_top() {
var a = document.getElementById('topf');
a.src = "http://www.aapastech.com";
}
</script>
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>
在这里尝试另一个答案我们在框架集元素中使用 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>
经过更多的挖掘,我发现从另一个帧定位一个帧的方法是使用:
parent.document.getElementById('frameName').src
所以我的函数现在可以工作了,看起来像这样:
<script>
function reload_top() {
parent.document.getElementById('top').src = "venues.php";
}
</script>
感谢您的帮助。