フレーム内のhtmlファイルが表示されるとき、親フレームを強制的に表示させる
フレームを使ったホームページ構成は、検索エンジンとの相性が良くないため、ホームページ制作する場合は、極力使わないようにしています。他サイトからのリンクもトップページに張ってもらわなければならず、有用な情報への直リンクがしにくくなります。
Googleなどで、”フレーム SEO”などのキーワードで検索すると、上位に理由が書かれた解説ページがヒットしますので、興味のある方は、しらみつぶしに読んでみてください。
どうしてもフレームを使わないとならない場合の対策方法も上記のページに書かれています。フレーム内の素のhtmlファイルが表示されそうになったら、強制的に親フレームを表示させるようにjavascriptでプログラミングします。
通常のフレームページ例です。フレームを左右に分割してあります。
右サイドのコンテンツ１を新規で開くをクリックすると、main1.htmlが表示されます。
各フレームページのソース
index.html（フレームの枠になります）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>フレーム本体</title> </head> <frameset rows="*" cols="20%,*"> <frame src="left.html" name="leftFrame" /> <frame src="main1.html" name="mainFrame" /> </frameset> <noframes> <body> このブラウザーは、フレームがサポートされていません。 </body> </noframes> </html>
left.html（左サイドのソース）
<!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 http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>left.html</title> </head> <body> <ul> <li><a href="main1.html" target="mainFrame">コンテンツ１</a></li> <li><a href="main2.html" target="mainFrame">コンテンツ２</a></li> </ul> </body> </html>
main1.html（右サイドのコンテンツ１のソース）
<!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 http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>main1.html</title> </head> <body> <p>コンテンツ１</p> <a href="main1.html" target="_blank">コンテンツ１を新規で開く</a> </body> </html>
main2.html（右サイドのコンテンツ２のソース）
<!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 http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>main2.html</title> </head> <body> <p>コンテンツ２</p> <a href="main2.html" target="_blank">コンテンツ２を新規で開く</a> </body> </html>
つぎに強制的にフレームページを表示させるようにしたしたものです。
右サイドの”コンテンツ１を新規で開く”をクリックすると、先ほどとは違いフレームページが開かれます。
左サイドでコンテンツ２を表示状態で”コンテンツ２を新規で開く”をクリックした場合も、フレームページが表示され、右サイドには、コンテンツ２が表示されます。
ただし、Internet ExplorerのVersion 6、7、8などは、コンテンツ２が表示されず、コンテンツ１が表示されます。
これは、location.hrefでページ移動した場合、document.referrerプロパティの値が空のため、元ページが分からないためです。IEの仕様ですのでどうすることもできません。FireFoxやSafariは、正しく機能します。
ポイントは、各コンテンツのページに親フレームが存在しないときは、locationで親フレームに移動します。親フレームのページ（index.html）には、コンテンツから移動してきた場合、コンテンツをmainFrameに表示させるようにscriptで変更させます。
コンテンツ３(main3.html）は、bodyタグのonLoadイベントに記述した例で、条件判定の方法は異なりますが、やはり、親フレームが存在しないときは、親フレームへ移動するようになっています。
各フレームページのソース
index.html（フレームの枠になります）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>フレーム本体</title>
<script language="JavaScript">
<!--
function ChanePage(){
var url = 'http://koubou.nin29.com/pics/heya/frame2/';
var thisPage = document.location.href;
var prevPage = document.referrer;
if(thisPage != prevPage){
if(prevPage.indexOf(url) > -1){
var file = prevPage.substr(url.length);
if(file != 'left.html'){
parent.mainFrame.location.href = file;
}
}
}
}
// -->
</script>
</head>
<frameset rows="*" cols="20%,*" onLoad="ChanePage()">
<frame src="left.html" name="leftFrame" />
<frame src="main1.html" name="mainFrame" />
</frameset>
<noframes>
<body>
このブラウザーは、フレームがサポートされていません。
</body>
</noframes>
</html>
left.html（左サイドのソース）
<!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 http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>left.html</title> </head> <body> <ul> <li><a href="main1.html" target="mainFrame">コンテンツ１</a></li> <li><a href="main2.html" target="mainFrame">コンテンツ２</a></li> <li><a href="main3.html" target="mainFrame">コンテンツ３</a></li> </ul> </body> </html>
main1.html（右サイドのコンテンツ１のソース）
<!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 http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>main1.html</title>
<script type="text/javascript">
<!--//
if(window.parent && window.self){
if(window.parent.location == window.self.location){
window.parent.location.href="index.html";
}
}
//-->
</script>
</head>
<body>
<p>コンテンツ１</p>
<a href="main1.html" target="_blank">コンテンツ１を新規で開く</a>
</body>
</html>
main2.html（右サイドのコンテンツ２のソース）
<!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 http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>main2.html</title>
<script type="text/javascript">
<!--//
if(window.parent && window.self){
if(window.parent.location == window.self.location){
window.parent.location.href="index.html";
}
}
//-->
</script>
</head>
<body>
<p>コンテンツ２</p>
<a href="main2.html" target="_blank">コンテンツ２を新規で開く</a>
</body>
</html>
main3.html（右サイドのコンテンツ３のソース）
<!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 http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>main3.html</title> </head> <body onLoad="if (parent.frames.length==0) top.location='index.html'"> <p>コンテンツ３</p> <a href="main3.html" target="_blank">コンテンツ３を新規で開く</a> </body> </html>
インラインフレームの場合
インラインフレームも同様の方法で、iframe内のソース部分のみが表示されてしまうのを防ぐことができます。
各フレームページのソース
index.html(メインページになります)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>インラインフレーム本体</title>
<script language="JavaScript">
<!--
function ChanePage(){
var url = 'http://koubou.nin29.com/pics/heya/frame3/';
var thisPage = document.location.href;
var prevPage = document.referrer;
if(thisPage != prevPage){
if(prevPage.indexOf(url) > -1){
var file = prevPage.substr(url.length);
parent.mainFrame.location.href = file;
}
}
}
// -->
</script>
</head>
<body onLoad="ChanePage()">
<ul>
<li><a href="main1.html" target="mainFrame">コンテンツ１</a></li>
<li><a href="main2.html" target="mainFrame">コンテンツ２</a></li>
<li><a href="main3.html" target="mainFrame">コンテンツ３</a></li>
</ul>
<iframe src="main1.html" name="mainFrame" width="100%"></iframe>
</body>
</html>
main1.html（コンテンツ１）
<!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 http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>main1.html</title>
<script type="text/javascript">
<!--//
if(window.parent && window.self){
if(window.parent.location == window.self.location){
window.parent.location.href="index.html";
}
}
//-->
</script>
</head>
<body>
<p>コンテンツ１</p>
<a href="main1.html" target="_blank">コンテンツ１を新規で開く</a>
</body>
</html>
main2.html（コンテンツ２）
<!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 http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>main2.html</title>
<script type="text/javascript">
<!--//
if(window.parent && window.self){
if(window.parent.location == window.self.location){
window.parent.location.href="index.html";
}
}
//-->
</script>
</head>
<body>
<p>コンテンツ２</p>
<a href="main2.html" target="_blank">コンテンツ２を新規で開く</a>
</body>
</html>
main3.html（コンテンツ３）
<!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 http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>main3.html</title> </head> <body onLoad="if (parent.frames.length==0) top.location='index.html'"> <p>コンテンツ３</p> <a href="main3.html" target="_blank">コンテンツ３を新規で開く</a> </body> </html>
IT工房にんにく庵関連ページ
・ ホームページ制作
