- 締切済み
別フレームにスムーススクロールを使用したい。
別フレームにスムーススクロールを使用したい。 Javascript初心者です。 自分自身でも色々調べたのですが、どうしても分からないことがあり、お力を貸して頂ければと思います。 http://user1.matsumoto.ne.jp/~goma/js/ps2.html こちらのサイト様のようにスムーススクロールを使った移動を使いたいと考えております。 上記サイト様で使われているスクリプト等は理解出来ております。 今回、この応用として、 別フレームでスムーススクロールを使用するということをしたいと考えております。 (上記サイト様は、同じページ内での移動ですが、今回はボタン(リンク部分)と移動するページが それぞれ別フレームになっているものを考えております。) このようなやり方を紹介しているサイト様、もしくは書籍などご存知でしたら教えて下さい。 もしくは、上記サイト様のスクリプトをどのように応用すれば良いかなど教えて下さい。 どうぞ宜しくお願い致します。
- maccccco
- お礼率70% (45/64)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
質問の画像を良く見ると、別に<iframe>でも<frameset>でも無さげだ。 そもそも、フレーム要素とは誰も言ってない。早とちりか！ 単なる<div>ボックスのスクロールでよかったのかしらん？ となるとこのライブラリーはアンカーめがけてスクロールするだけだから 使えないよ。別の仕組みを作るか、探すかしないと．．．
- yyr446
- ベストアンサー率65% (870/1330)
幸い単純なスクローラーの仕組みだったみたいで、楽な方法で出来ますね。 <iframe id="iframe1" name="iframe1" src="target.html"></iframe> があったとして、iframeに表示する「target.html」の<head>要素にでも <script type="text/javascript" src="/ps2.js"></script> を加えてロードさせておく。 親からのリンクの<a>要素は、ちょっと長いけど <a href="#foo" onclick="return document.getElementById('iframe1').contentWindow.ps2.scroller(this);"> iframe内の＃fooへスクロール</a> で、出来ました。
- yyr446
- ベストアンサー率65% (870/1330)
<iframe id="iframe1" src="/hoge.html" ></iframe> という<iframe>要素があったとして、 そのiframeのWindowオブジェクトは、 var iframe = document.getElementById("hoge");として iframe.contentWindow で取得可能 よってiframe内のスクロールなら、 iframe.contentWindow.scrollTo(X,Y); ※X,Yはiframe内の移動量 iframe内の要素の取得は、iframe内のdocumenntオブジェクトは、 iframe.contentDocumentで取得可能 ※古いIEだと、iframe.contentWindow.documentでよい よって、 var content=iframe.contentDocument||iframe.contentWindow.document; とすれば、 content.getElementById("xxx") の様にiframe内の任意の要素が取得できる。 しかし、取得した要素の高さ・幅や位置（X,Y）の取得は、ブラウザーに よって方言があり、振り分け方法が煩雑で面倒になる。 さらにバブリングするイベントのIEでの取得は、さらに面倒 iframe.contentWindow.document.attachEvent('onclick', function(){ alert(iframe.contentWindow.event.clientX); }); よって、無理にiframe内のDOMを操作するよりは、iframe内のHTMLにも 親と同じjavascriptライブラリーをロードしておいて、親のjavascript から、子供のjavascriptを操作するようにした方が楽じゃないかな。
- fujillin
- ベストアンサー率61% (1594/2576)
ちゃんと見ていませんが… フレームが異なるということはドキュメントが異なることになりますので、ドキュメントオブジェクトを指定できるように変更してあげれば動作するようになるのでは？ ただし、フレームの内容が別ドメインの場合はスクリプトのアクセス制限があるので、動作できないと思われます。
