若干Joomla!と離れた、というか、Joomla!限定の話でもないのですが、

  1. iframeを使用時に
  2. iframe内のアンカーを使って
  3. 親フレームのスクロールを
  4. 好きな場所に移動させる

という動作をさせたかった時に悩んだので、そのためのメモです。

多分一番手っ取り早い方法は、Javascriptでスクロールバーを動かすことだと思いますが、私の場合はiframe内のページが別ドメインのページだったために、クロスドメイン制限というのに引っかかって上手く実装できませんでした。なので、htmlとcssで強引に解決しました。

具体例

言葉で書いても上手く説明出来る気がしないので、テストページを作ってみました。

このテストページの左側に表示されているのは、iframeの中身です。iframe自体にスクロールバーが出ないように調整しています。

簡単なまとめ

  1. 親フレームのページにifreamと、移動先のa要素を用意する
  2. 子フレームのページにtarget="_top"を付けた、親フレームのa要素へ移動するリンクを張る
  3. 親フレームのa要素にposition: absolute; top: ◯◯px;のスタイルをつけて、移動先を調整する
  4. 調整がすんだら、visibility: hiddenのスタイルをつけて、親フレームのa要素を隠す

解説

タイトルでラッパーと書いてありますが、Joomla!のラッパーではコレは実装できません。(少なくとも1.5では）
なので、普通に記事を作って、以下のHTMLを書きます。(以下このページを親フレームと呼びます）

親フレーム

<iframe 
	id="publicsale"
	name="publicsale"
	src="http://n-s.vety.net/test/iframe.html"
	height="1600"
	width="850"
	scrolling="no"
	align="top"
	frameborder="0"
	class="wrapper">
	Iframes無し</iframe>

<a name="1" style="position: absolute; top: 230px; visibility: hidden;">1</a>
<a name="2" style="position: absolute; top: 730px; visibility: hidden;">2</a>
<a name="3" style="position: absolute; top: 1230px; visibility: hidden;">3</a>

ifream内のページの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=UTF-8" />
<title>iframeテストページ</title>
</head>
<body>
<h1>iframeテストページ</h1>
<ul>
  <li><a href="http://（親フレームのURL）#1" target="_top">1へ</a></li>
  <li><a href="http://（親フレームのURL）#2" target="_top">2へ</a></li>
  <li><a href="http://（親フレームのURL）#3" target="_top">3へ</a></li>
</ul>
<div style="width: 100%; height: 500px; background-color: #E1DFD6">1</div>
<div style="width: 100%; height: 500px; background-color: #DBEFE6">2</div>
<div style="width: 100%; height: 500px; background-color: #E8F0FF">3</div>
</body>
</html>

上のテストページでは、子フレームのページのURLは「http://n-s.vety.net/test/iframe.html」ですが、10〜12行目のa要素は「http://n-s.vety.net/j/test/」を指定しています。これは、親フレームのページのURLです。

このリンクをクリックすることにより、親フレームの13〜15行目で設定したアンカーへ移動します。

親フレームの13〜15行目では、同時にcssのpositionプロパティでa要素の位置を移動して、アンカーの飛び先を調整しています。また、visibilityプロパティをhiddenにすることにより、非表示にしています。（display: noneにすると、移動しなくなるので注意。）