質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • JavaScript

    16348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • iframe

    119questions

    HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

クロスドメインで表示させているiframe内の要素までスクロール

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 916

ysfree14

score 1

楽天のスマートフォン商品ページのカスタマイズで行き詰っています。

親ページで子ページ(別サーバー上のiframe)を読み込んでいます。
実装したい内容としましては、親ページにボタンを設置して、そのボタンをクリックで子ページの要素(<div id="hoge"></div>)まで上からスクロールさせたいと考えいます。
ボタンはposition: fixed;で画面に追従するよう設置したいと考えています。

iframeはスクロールバーなどはでない状態で、現状は下記の高さを自動調節する記述を入れています。
(普通の1枚ページのように下部へスクロールさせたいと考えています)

■親ページ

script
<script type="text/javascript">
        window.addEventListener('message', function(e) {
        var iframe = jQuery("#fugapage");
        var eventName = e.data[0];
        var data = e.data[1];
        switch(eventName) {
            case 'setHeight':
                iframe.height(data);
                break;
            }
        }, false);
</script>

<iframe id="fugapage" src="iframeのURL"></iframe>


■子ページ

<script type="text/javascript">
     window.onload = function() {
        var height = document.getElementsByTagName("body")[0].scrollHeight;
        window.parent.postMessage(["setHeight", height], "*");
    }
</script>


何かいい方法はあるのでしょうか?

子ページで指定要素の高さを取得して、それを親ページへ渡す方法がいいのでしょうか、、
JS初心者なので行き詰まっております。

よろしくお願い致します。


参考ソースを実装しました
PCでは動作しますが、現状スマートフォン(iPhone Safari)にて、実装できておりません。

■親ページ

html
<div id="button"></div>

css
#button {
    position: fixed ;
    bottom: 310px ;
    right: -1px ;
    width: 44px ;
    height: 35px ;
    padding: 2px 0;
    z-index: 999 ;
    font-size: 13px ;
    border-radius: 5px 0 0 5px ;
    line-height: 1.4 ;
    color: #fff ;
    background: #cc0000 ;
    text-align: center ;
}

<script type="text/javascript">
jQuery(window).load(function(){
     jQuery('#button').on('click',function(){
        document.getElementById('fugapage').contentWindow.postMessage('hoge', '*');
    });
});
</script>

<iframe id="fugapage" src="iframeのURL"></iframe>

■子ページ

html
<img src="xxx" id="hoge" border="0" alt="">

<script type="text/javascript">
window.addEventListener('message', function(event) {
    document.getElementById(event.data).scrollIntoView();
}, false);
</script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • ysfree14

    2018/04/20 18:31

    いえ、親ページ側にボタンを設置しています。かしこまりました、よろしくお願い致します。

    キャンセル

  • ysfree14

    2018/04/20 18:38

    html css追記いたしました。何卒よろしくお願い致します。

    キャンセル

  • ysfree14

    2018/04/20 18:40

    申し訳ございまいません、JavaScriptの記述が逆になっていました。

    キャンセル

回答 3

+2

CSSもJavaScriptも必要ない気がしますがどうでしょう?(こういった動きではない?)

main.htm側にsub.htmを表示するiframe要素を用意し, 更にiframeの参照しているURLを書き換えるようなa要素を用意しておけば, 後は勝手にWEBブラウザがフレーム内のWEBページの表示位置を調整してくれます. 

<!--main.htm-->
<iframe src="sub.htm" name="sub" scrolling="no"></iframe>
<a target="sub" href="sub.htm#a">aを選択</a>
<a target="sub" href="sub.htm#b">bを選択</a>
<a target="sub" href="sub.htm#c">cを選択</a>
<!--sub.htm-->
<style>
div{
    height: 200px;
}
</style>
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/20 16:12 編集

    iframeにname属性とscroll属性を追加
    aタグのtargetをiframeのname属性に

    こちら試しに実装してみましたが、リンククリックでも動かないです。
    楽天サイトだからなのでしょうか...

    キャンセル

  • 2018/04/20 16:18

    少なくともサブページ(この場合は楽天?)側の表示対象のノードにIDが振られている必要がありますが, WEBページの作りにも関わるので, (このやり方だけでうまく行くかどうかは)なんとも言えません.

    キャンセル

  • 2018/04/20 16:55

    かしこまりました、ご回答ありがとうございます。

    キャンセル

+2

正攻法ならやはりpostMessageということで。

  window.addEventListener('message', function(event) {
    document.getElementById(event.data).scrollIntoView();
  }, false);

  document.getElementById('fugapage').contentWindow.postMessage('hoge', '*');

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/20 18:06 編集

    ご回答ありがとうございます。
    hogeをクリックで移動させることができました。

    質問時の説明不足で申し訳ございませんが、親ページのhoge(ボタン)がposition: fixed;で画面に追従させたいと考えています。
    今回の方法だと、ページトップにいるときはhogeまで移動するのですが、ある程度スクロールしてからボタンをクリックすると位置がズレてしまいます。
    こちらの解決方法はありますでしょうか?

    キャンセル

  • 2018/04/20 18:11

    すみません、ちょっと状況がわかりません。
    再現できるコードは提示できるでしょうか?(このコメント欄ではなく質問欄へ)

    キャンセル

  • 2018/04/20 18:27 編集

    参考ソースを質問欄へ追記いたしました。
    PCのchomeで見ると、どの位置でボタンをクリックしてもhogeの場所へ飛ぶのですが、
    スマートフォン(iphone safari)実機で確認すると、ページトップにいるときにボタンを押すとhogeの場所へ飛ぶのですが、
    他の位置でボタンをクリックすると、トップの時と同じ値の分下へ移動してしまいます。

    キャンセル

  • 2018/04/20 18:29

    質問へのコメントを書きました。週末は回答できないと思うのでほかの回答者からのものも期待してください

    キャンセル

0

こういうことがやりたいのかなと。

<button type="button" id="top">最上部</button>
<button type="button" id="middle">真ん中らへん</button>
<button type="button" id="bottom">最下部</button>
<iframe id="fugapage" src="子html"></iframe>
<script src="/js/jquery-3.2.1.js"></script>
<script>
$(function(){
    $(document).on('click', 'button', function() {
        $('body,html', $('#fugapage').contents()).animate({scrollTop:$('#fugapage').contents().find('div#page'+$(this).attr('id')).offset().top});
    });
});
</script>

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="pagetop">最上部</div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
        <div id="pagemiddle">真ん中らへん</div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
        <div id="pagebottom">最下部</div>
    </body>
</html>

徒然参考記事

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/20 13:30

    別サーバーとあるので、クロスドメインに引っかかるのでは?

    キャンセル

  • 2018/04/20 13:32

    なるほど。確かにそうですね。
    同サーバー内ならおそらくこの回答で問題ないでしょうけど。
    ややこしいかもしれませんね。

    キャンセル

  • 2018/04/20 18:09

    ご回答ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    javascriptで時計を表示

    javascriptdeでcanvasに 時計を表示したいのですが 5分おきに少し長いメモリにしたのですがどうすればいいのでしょうか。 また、針の太さを変える方法を教えてください

  • 解決済

    javascript classがうまく付与されない

    javascript初心者なためどうしても解決できず質問しました。 パララックス サイトを構築しておりました。 参考url http://histerian.net/pallax/

  • 解決済

    position:absoluteの値をjavascriptでランダムに決める

    実現したいこと javascript超初心者です。 javascriptでposition:absoluteの数値をランダムに決めたいのですが乱数をpositionの値に入れる方法

  • 解決済

    Failed to execute 'appendChild' on 'Node': paramet...

    Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.とエラーが出る。 qu

  • 解決済

    jqueyの繰り返しをスマートにしたい

    ■目的 同じ処理を繰り返すjqueryがあるので、スマートに一括したいです。 ■現状 次のjqueryが【cookieがあればチェックする】という仕組みを担当してくれているので

  • 解決済

    javascriptで置換した文字列をもとに戻したい

    javascript初学者です。 以下のように、クリックイベントを取得し関数でwebページ内の文字列をDOMで置換しています。 $(function(){ $('.ch

  • 解決済

    appendChildの上書きについて

    Javascript初学者です。createElementを触っています。 【実現したいこと】 フォームに入力された値を受け取り、 onclickでフォームエリアの下に入力した

  • 解決済

    JavaScriptで入力用サブウィンドウ作成

     前提・実現したいこと 「visual basic」などでのプログラミングは慣れているのですが、 「JavaScript」の初心者です。 大変恐縮ですが、JavaScriptで

同じタグがついた質問を見る

  • JavaScript

    16348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • iframe

    119questions

    HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。