Top ＞ ホームページ  ＞ 2010年05月15日

« パソコンの掃除方法 | | cpiサーバにCakePHPを設置する »

フレーム内の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工房にんにく庵関連ページ

 

・ ホームページ制作

  作成: 2010年05月15日 20:20 | 更新: 2010年05月15日 20:28 |

コメントを投稿

カテゴリー

最近のエントリー

アーカイブ

検索


Feed

Really Simple Syndication 2.0 The Atom Syndication Format Really Simple Discoverability