프레임 세트가없는 기본 페이지가 있으며,이 기본 페이지에는 자체 메뉴가 있습니다. 그런 다음 두 번째 "메인"페이지가 있는데, 왼쪽 프레임에는 기본 페이지와 동일한 메뉴가 있고, 중간 프레임에는 컨텐트가 지정된 4 개의 프레임 (위, 왼쪽, 가운데 및 오른쪽)으로 나뉩니다. 이제 제 질문은 기본 페이지 메뉴에서 프레임 세트가있는 두 번째 기본 페이지로 보내지 만 중간에 다른 페이지가있는 것처럼 모든 주제에 대해 어떻게 만들 수 있습니까? 저는 최종 프로젝트를 수행하는 고교생입니다.프레임 셋을 사용하여 메인 페이지 메뉴에서 두 번째 메인 페이지로 어떻게 이동할 수 있습니까?
HTML4.01을 꼭 사용해야하는 경우이 기술을 "onclick"자바 스크립트와 함께 사용할 수 있습니다. 추가 프레임을 위해이 기술을 반복하십시오. 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>
같은 첫 메인 페이지에서 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>
다음으로 두 번째 메인 페이지는 자바 스크립트와 쿼리 문자열 매개 변수를 얻을하고 그에 따라 프레임로드 :
<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>
글쎄, 당신은 그런 걸 시도 할 수 있습니다 : (프레임없이) 메인 페이지에서
을 :
을 당신의 프레임에서<!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 우리가 herer을
<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"프레임 속성에 전달합니다. 그게 다야.
지금까지 해본 것을 써보십시오. –
코드 중 일부는 달성하려는 목표를 undestand 도움이 될 것입니다. ** _
기존 프로젝트로 작업하지 않는 한 '