フレームページを一定量だけ横移動

前へ 次へ
このQ&Aのポイント
  • CGI形式の掲示板でリンクをクリックすると一定量（たとえば400ピクセル）だけ左右に移動するスクリプトを探しています。
  • リンクをクリックすると一定量の横移動をするスクリプトについて、著作権の問題や改造の方法について教えてください。
  • 横移動するスクリプトの著作権や改造についての疑問を質問させてください。
回答を見る
  • ベストアンサー

フレームページを一定「量」だけ横移動

http://studio-p.net/ こちらのようにインラインフレームを横移動させるようなスクリプトを実行させたいのですが、改造のしかたが分からず、一度HPを丸ごとDLしてローカルで試してみようとしたんですが、何も手を加えない状態でスクリプトエラーと出てしまいました。 仕方ないのでことスクリプトを使うやり方は諦めたので、ここで似たようなスクリプトをお尋ねしたいと思います。 僕が横移動させたいページをいうのはCGI形式の掲示板なので、各ポイントに<a name="xxx"></a>、<a href="#xxx">というようなタグを自動で打ち込ませることはできません（出来るとしたらやり方が分かりません）。 なので、リンクをクリックすると一定量（たとえば400ピクセル）だけ左右に移動するような、そのようなスクリプトがあれば解決すると思います。 例に挙げたページではアニメーションっぽい動きがついていますが、これは無くても構いません（あると助かります）。 もう1つ質問なのですが、これらのスクリプトに著作権ってあるのでしょうか？ 例に挙げたページのようなスクリプトって他で見たことが無いので、管理人さんの自作のものだと思うのですが、そういうものはやはりその人が苦労してプログラムしたものだけに、無断で流用・改造して使ったら問題になるのでしょうか？ よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

Wizard_Zeroと申します。 単純に移動するだけならこんな感じでOK。 [ index.html ] <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"><!-- function moveframe(nMove) { movingframe.scroll(nMove,0); } //--></SCRIPT> </HEAD> <BODY> <A HREF="#" OnClick="moveframe(0);">ブロックＡ</A> <A HREF="#" OnClick="moveframe(400);">ブロックＢ</A> <A HREF="#" OnClick="moveframe(800);">ブロックＣ</A> <A HREF="#" OnClick="moveframe(1200);">ブロックＤ</A> <DIV><IFRAME ID="movingframe" WIDTH="400" HEIGHT="320" SRC="frame.html" SCROLLING="NO"></IFRAME></DIV> </BODY> </HTML> [frame.html] <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY STYLE="margin : 0px ; padding : 0px"> <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="1600"> <TR> <TD STYLE="width : 400px ; background : #afafff">ブロックＡ</TD> <TD STYLE="width : 400px ; background : #ffafaf">ブロックＢ</TD> <TD STYLE="width : 400px ; background : #afffaf">ブロックＣ</TD> <TD STYLE="width : 400px ; background : #afafaf">ブロックＤ</TD> </TR> </TABLE> </BODY> </HTML> moveframe 関数を呼び出す時に横スクロールバーの位置を指定すればその場所へ移動します。 # IE、Operaで動作確認しました。

taku17
質問者

お礼

完璧に動きました！ 素晴らしいです、どうもありがとうございました。 ちなみに、ちょっとプログラム関連で気になったのでお尋ねしたいのですが、 もしこのページの横移動を親フレームからではなく、そのページ自身で行うとしたら、スクリプトはどの様に変わってくるのでしょうか？

その他の回答 (1)

回答No.2

#1 Wizard_Zeroです。 <SCRIPT LANGUAGE="JavaScript"><!-- function moveScroll(nMove) { document.parentWindow.scroll(nMove,0); } //--></SCRIPT> moveScrollを同じページ内で呼び出せばスクロールが移動します。 # ついでなので詳しい解説 まず、スクロールバーを動かすにはscrollという関数を呼び出す必要があります。この関数を持っているのは「Window」というオブジェクトで、IFRAMEの場合はIDに相当します。同じページ内で呼び出すには、まずdocumentからparentWindowというプロパティでWindowオブジェクトを引っ張り出してscroll関数を呼び出します。フレームを使ったページでも要領は同じです。オブジェクトの階層構造とそれぞれのオブジェクトが持つプロパティや関数を覚えると(調べられるようになると)スクリプトでのウィンドウ操作も上達するでしょう。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • インラインフレーム内でリンク移動

    親ページ内のインラインフレームに表示したページで、リンク移動をしたいと考えています。 親ページはインラインフレームのみ ※楽●のカテゴリーページのため親ページにJavascriptなどはつけることができません。 インラインフレーム内の表示ページで、 例えば<a href="#sale">セール</a>とリンクを付け、そのインラインフレーム内のページの(id=sale)セールの項目へ移動させたいと考えています。 当初jQueryページ内移動、　 http://web-park.org/javascript/scroll100126.html 上記サイトのコードを使用して試しましたが、インラインフレーム内ではだめでした。 何か上記のサイトのコードを変えればうまくいきそうな気もしましたが初心者なのでだめでした。 jQueryは使わず最も一般的な<a href="#sale">セール</a>⇒id=saleに変えましたが、こちらもインラインフレームではうまくいきません。 なんとかインラインフレーム内に表示するページのコードでリンク移動ができないものでしょうか？ ご存知の方ぜひご教授お願いいたします。

    • ベストアンサー
    • HTML
  • JavaScriptでページ移動関係の質問です。

    JavaScriptでページ移動関係の質問です。 今、私がしたいと思っていることは、ある関数を実行して http://aaa/page=1?a=b,http://aaa/page=2?a=b,http://aaa/page=3?a=b,・・・ と指定ページ（最後のページ: page=X）まで １．全ページにわたり、 ２．ページ内にある要素があるか調べる関数を走らせ、 その結果をアラートなどでわかるようにすることです。 ２は完成していて、１について実現できず困っています。 location.hrefを使ってsetTimeoutで時間を何秒かごとにしても、一回移動してしまえばスクリプトはもう動かなくなってしまいます。 例） location.href=getXXXURL(++currentPage);//移動 bool=findUser(searchID,currentPage);//探す alert(bool); この２を実現する方法についてコードの例を交えて、教えていただきたいです。 よろしくお願いいたします。

  • 別ページのインラインフレームのアンカーに移動させる方法

    はじめまして、勉強になります。色々調べてやってみたのですがどうしてもうまく動作してくれません。 やりたい内容は、あるページから同一ドメイン内のあるページに飛ばした時にアンカー情報（#～）付きで渡して、渡したページ先のインラインフレーム内のアンカーに移動させたいのです。 下のソースでstr変数がうまく渡っていないのか、受け取り側のスクリプトがまずいのかが分かりません。（ちなみに途中で変数をモニターする方法があるのでしょうか？） 一応次のページのURLバーには?以降のアンカー情報付きで表示されてはいるのですが、その?以降のアンカー情報がインラインフレームのURLに渡っていないような状態です。 以下省略ソースです。 【送信元】 <SCRIPT Language="JavaScript"> <!-- html1 = "飛ばす先.htm"; function watasu(str){ location.href = html1 + "?"+ str; } //--> </SCRIPT> </head> <body ～ <img src="画像.jpg" onClick="watasu('#2')"> 【受信側　親ページ】 <script language="JavaScript" type="text/javascript"> <!-- url1 = "liveevent_test.htm"; function jump2(){ url2 = "読み込むインラインフレーム.html"; str = location.search.substr(1,location.search.length-1); top.インラインフレーム名.location.href = url2+str; //top.インラインフレーム名.location.hash = #アンカー; <--ちなみにこの一行を上の一行と差し替えたら動きました。ですがここは前ページからの変数渡しにしたいのです。 } // --> </SCRIPT> <body ～ onLoad="jump2()">～ <IFRAME SRC="読み込むページ.html" name="インラインフレーム名" >～</IFRAME> どなたかヒントでもいいのでお力添えください…もしかして根本的なやり方がまずいのでしょうか。 よろしくお願いいたします。

  • 1クリックで複数のページを開く（片方はインラインフレームに）

    現在フレームを使ってサイトを作っています。 左右2分割で、 左側がmenu.html name=left 右側がmain.html name=right 更に左側のページにはインラインフレームがあり、 frame.html name=sita となっています。 左側のインラインフレームの外にあるリンクを一度押すと、右側のフレームとインラインフレームの中で新しくページが開くようにしたいと考えています。 <SCRIPT language="JavaScript"> <!-- function link1() { parent.right.location.href='aaa.html'; parent.sita.location.href='bbb.html'; } --> </SCRIPT> <A href="JavaScript: link1();">リンク</A> （<body>諸々は略しています） このスクリプトを使用するとインラインフレームの部分が普通のフレームの場合は同時に開くことが出来たのですが、sitaをインラインフレームにすると動かなくなりました。 色々と検索してみたのですが答えにたどり着けずお手上げです。 解決方法をご存知の方、どうぞよろしくお願いいたします。

  • ページ内、ピクセル移動でスムーズに！

    こんばんは、HTML等を独学で勉強中です。 ページ内をスムーズに“href #”移動するJqueryは見かけるのですが ピクセル単位にスムーズに移動するJqueryやJAVAコードはないでしょうか。 自分で HEAD内で↓ function Spring_Co_ordiname(){ var s1=window.scroll( 900, 700 ); } BODY内で↓ <li><a href="javascript:Spring_Co_ordiname()"><img src="images/btn_nav.png" width="30" height="30" alt=""></a></li> というコーディングをしていますが ここをスムーズなスクロール機能を追加したいんです。 どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • フレーム内にあるメニューからトップページに戻る方法を教えてください。

    先ほど他の事でも質問したので恐縮ですが、どうしても分からないので教えてください。 現在、横３分割でフレームを切り、一番上にメニューを載せています。 同フレームのページ表示は問題ないのですが、トップページへ戻れません。 <a href="xxx.htm" target="_top"> だと、トップページは表示されますが別窓になってしまいますよね？ 最初に開いた親ページに単純に戻りたいのですが、これは可能なんでしょうか？ 度々ですみませんが、ご存知の方いらっしゃいましたらよろしくお願いします。

    • ベストアンサー
    • HTML
  • インラインフレームのページを外部のページから変更するには？

    Aというページの中にインラインフレームのページBがあります。 Aからのリンクボタンを押すとBからCのページにリンクさせる、ということはできるでしょうか？ 普通のフレームで分割している場合だと <A href="***.html terget="(フーレムの名前)">の要にできるのですが、インラインフレームで同じ事をやりたいのです。 よろしくおねがいします。

    • ベストアンサー
    • HTML
  • フレーム内でトップに戻るようにするには

    インラインフレームのページとなるHTMLの中で、 <a name="top">もくじ</a> [中略] <a href="#top">トップに戻る</a> としているのですが、リンク文字をクリックすると、土台の方のページが動いてしまいます。なんとか、フレーム内だけで、トップに戻るようにするには、どうしたらいいのでしょうか。よろしくお願いします。

  • ajaxを使用したページ移動における検索エンジン対策

    『　2ページ目に移動 →　』　等のリンクをajaxで処理してしまうと、検索エンジンはjascriptを解析しないので、検索エンジンに2ページ目が反映されませんよね。 回避策の基本的な概念としては、以下のソースでよろしいのでしょうか。 <script type="text/javascript"><!-- document.write("<a href='javascript:ajax_link(2);return false'>２ページ目に移動　→</a>"); --></script> <noscript> <a href="ｈttp://sample.php?page=2">2ページ目に移動 →</a> </noscript> ※1 検索エンジンに２ページ目が反映されることを目的としています。 ※2　ajaxリンク・通常リンク共に、移動後のページ表示処理は完成しているものとします。 ※3 ajax_linkのjavascriptは完成しているものとします。 大丈夫だとは思うのですが、心配なので質問させていただきました。 また、他の解決策を知っている方は教えてほしいです。 よろしくお願いします。

  • 横スクロールのiframeをスムース移動させたい。

    webサイトの横スクロールのインラインフレームをスムーススクロールにしようとしています。 Javascript初心者です。 色々調べたのですが、うまくできず、力を貸していただけたらと思います。 http://okwave.jp/qa/q6244820.html こちらの質問のようにスムーススクロールを使った移動を横スクロールで使いたいと考えています。 上記のサイトを参考に組んだコードが下記です。 <!-- 親html --> <div> <a href="#a" onclick="return document.getElementById('inline').contentWindow.ps2.scroller(this);">A</a> </div> <div> <a href="#b" onclick="return document.getElementById('inline').contentWindow.ps2.scroller(this);">B</a> </div> <div> <a href="#c" onclick="return document.getElementById('inline').contentWindow.ps2.scroller(this);">C</a> </div> <div> <a href="#d" onclick="return document.getElementById('inline').contentWindow.ps2.scroller(this);">D</a> </div> <div> <a href="#e" onclick="return document.getElementById('inline').contentWindow.ps2.scroller(this);">E</a> </div> <div> <a href="#f" onclick="return document.getElementById('inline').contentWindow.ps2.scroller(this);" >F</a> </div> <iframe id="inline" src="フレーム内html" name="inline"> </iframe> <!-- フレーム内html --> <head> <script type="text/javascript" src="/ps2.js"></script> </head> <body> <div> <a id="a" name="a"> A </a> <a id="b" name="b"> B </a> <a id="c" name="c"> C </a> <a id="d" name="d"> D </a> <a id="e" name="e"> E </a> <a id="f" name="f"> F </a> </div> </body> しっかり理解していなくて恐縮なのですが読み込んでいるJavaScriptは横スクロールには対応していないのでしょうか？ 文章の欠陥もしくはJavaScriptの応用の仕方、もしくは別のこうした使用に対応できる他のJavaScript等ありましたら教えて下さい。 どうぞ宜しくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する