我有一个没有框架集的主页，这个主页有自己的菜单。 然后我有第二个“主”页面，它分为 4 个框架（上、左、中和右），左框架与主页面具有相同的菜单，并且内容定位到中间框架。 现在我的问题是如何从主页菜单中将其发送到带有框架集的第二个主页，但中间有另一个页面，等等所有主题。 我是一名高中生，正在做我的期末项目。
【问题讨论】：
<frameset>。已经过时了，HTML5不支持，不兼容响应式设计，甚至不利于SEO。
嗯，你可以试试这样的：
在您的主页中（没有框架集）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page Without Frameset</title>
</head>
<body>
<h1>Main Page Without Frameset</h1>
<ul>
<li><a href="index.html?target=google" target="main">Google</a></li>
<li><a href="index.html?target=yahoo" target="main">Yahoo</a></li>
<li><a href="index.html?target=coursera" target="main">Coursera</a></li>
</ul>
</body>
</html>
在您的框架集中
<script>
window.onload = function() {
var location = window.location.href;
var target = getParameterByName('target', location) !== null ? getParameterByName('target', location)+'.html' : 'middle.html';
document.getElementById("main").setAttribute("src", target);
console.log('target: ', target);
function getParameterByName(_name, _url) {
var [name, url] = [_name, _url];
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`);
var results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
};
}
</script>
<frameset rows="25%,*">
<frame src="top.html">
<frameset cols="25%,*,25%">
<frame src="left.html" name="left">
<frame src="middle.html" name="main" id="main">
<frame src="right.html" name="right">
</frameset>
</frameset>
最后，你的left.html就是那个……
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left</title>
<style>
body {
background: #ff0;
}
</style>
</head>
<body>
<h1>Left</h1>
<ul>
<li><a href="google.html" target="main">Google</a></li>
<li><a href="yahoo.html" target="main">Yahoo</a></li>
<li><a href="coursera.html" target="main">Coursera</a></li>
</ul>
</body>
</html>
我们在这里做什么？
首先，我们传递一个可以在主框架中打开的页面的参考。之后，我们使用辅助函数从 url 中捕获此引用。然后，我们将此引用解析为 html 文件名字符串，并将其传递给我们的“src”框架属性。就是这样。
【讨论】：
在您的第一个主页的 url 中添加一个查询字符串，例如：
<ul>
<li><a href="secondpage.html?content=home">Home</a></li>
<li><a href="secondpage.html?content=about">About</a></li>
<li><a href="secondpage.html?content=contact">Contact</a></li>
</ul>
然后为您的第二个主页使用 javascript 获取查询字符串参数并相应地加载框架：
<iframe id="frame-content"></iframe>
<script type="text/javascript">
var content_to_load = getParameterByName("content");
if (content_to_load == "home") {
document.getElementById('frame-content').src = "home.html";
} else if (content_to_load == "about") {
document.getElementById('frame-content').src = "about.html";
} else if (content_to_load == "contact") {
document.getElementById('frame-content').src = "contact.html";
}
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return results[2].replace(/\+/g, " ");
}
</script>
【讨论】：
如果您绝对必须使用 HTML4.01，您可以通过一点“onclick”javascript 来使用这种技术。 对更多帧重复该技术。 index.html：
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="30%,30%,30%">
<frame src="frame_b.htm">
<frame id= "framec" >
<frame src="frame_d.htm">
</frameset>
</frameset>
</html>
frame_b.htm：
<html>
<head>
</head>
<body>
<input type="button" id="english" value="English" onClick="window.parent.document.getElementById('framec').src='english.html';" >
</body>
</html>
english.html：
<html>
<head>
</head>
<body>
<h2> This is the english Page</h2>
</body>
</html>
【讨论】：