若干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にすると、移動しなくなるので注意。)

Joomla!記事一覧

  • カテゴリの説明のDIVを非表示に (Joomla! Tips) 2014-04-08 15:56:47

    テンプレートごとに違いはあると思いますが、メニューや記事のオプションで「カテゴリの説明」を表示にしていると、 カテゴリの説明が表示されるDIVが出力されます。 <div class="contentdescription clearafter"> <p>Joomla!関連のTipsなど。</p> </div> このテンプレートだとこんな感じ。...

  • ラッパー(iframe)使用時の親フレームのスクロール移動 (Joomla! Tips) 2013-03-06 14:32:26

    若干Joomla!と離れた、というか、Joomla!限定の話でもないのですが、 iframeを使用時に iframe内のアンカーを使って 親フレームのスクロールを 好きな場所に移動させる...

  • Joomla!2.5個人的設定メモ (Joomla! Tips) 2013-02-22 18:59:56

    1.5からあちこち変わって、ちょいちょい弄ってるので健忘録的な。 記事管理オプションの設定 記事管理右上「オプション」から設定へ。...

  • エディタでFatalErrorの対処 (Joomla! Tips) 2012-11-20 18:25:23

    古いサーバーから、新しいサーバへJoomla!を移転させるために、データベースを手動で移動させた所、 Fatal error: Call to...

  • JError Unable to load Database Driver: (Joomla! Tips) 2011-01-06 21:58:59

    Joomla!のインストール後、インストール時に以下のエラーメッセージが 「Joomla!のエラー」より抜粋 JError Unable to load Database...

Template by JoomlaShine