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

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

ただいまの
回答率

88.64%

iframe heightの自動計測をjQueryでしたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,106

honeybee

score 15

MakeShopの会員制サイト作成の為、イントロページ(TOPや商品ページ等とは完全に独立した干渉出来ないページ)に下記htmlの内容を組み込んでいます。

左サイドをクリックして右メイン部分にiframe id="brand"で呼び出した時に、中のコンテンツを自動で計算して高さを調節したく、

調べるといくつかjQueryのサンプルが出てきたので
いくつか試したのですが、動きません。

よろしくご教授下さい。

<html lang="ja">

<head>
    <meta charset="utf-8">
<style type="text/css">
@charset "utf-8";

/* common */
*{
    font-size: 14px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}


a:link, a:visited{
    text-decoration:none;
    color:#555;
}

a:hover{
    text-decoration:none;
    color:#f39;
}

p{
    line-height: 1.5;
}



#wrap{
width : 912px;
height: 100%;
margin: auto;
border: solid 0px red;
}

#side{
width : 200px;
border: solid 0px #386386;
float:left;
padding:30px 0 0 0;
}

div.brt{
    background-color:#eee;
    color:#333;
    font-weight:bold;
    font-size:12px;
    line-height:16px;
    padding:8px 10px;
    text-align: center;
}

div.brt span{
    font-size:13px;
}

#side ul{
    margin: 0px;
    padding: 0px;
    list-style-type:none;
    width:200px;
}

#side ul li{
    display: inline;
    margin:0px 0px 0px 0px;
    padding:0px;
    border:0px;
    font-size:9px;
    line-height:130%;
}

#side ul li b{
    font-size:11px;
    line-height:120%;
}

#side ul li a{
    display: block;
    background-color: #fff;
    padding:5px 10px 3px 10px;
    text-decoration: none;
    margin: 0px;
    text-align: left;
    font-size: 8px;
    line-height:120%;
    border-bottom:solid 1px #eee;
}

#side ul li a:hover{
    background-color:#f7f7f7;
    border-bottom:solid 1px #eee;
}
#side li a:hover{
    border:solid 1px #fff;
    background-color:#fff;
    color:#f39;
}

#intromain{
width : 702px;
float:right;
}

#brand{
width:701px;
}


.clear{clear:both;}

a.kaiin {
    width: 690px;
    display: inline-block;
    text-align: right;
    color: #f39;
    background: #eee;
    padding: 2px 10px 0 0;
    margin: 5px 0 25px 0;
}

</style>
</head>
<body>





<div id="wrap">
<div class="brt">BRAND</div>
<!--▼サイド▼-->
<div id="side">




<div class="brt"></div>
<ul>



<li><a href="http://shopping.geocities.jp/store-goods/ecstation/showcase/oroshi_arcteryx.html" target="brand"><b>ARCTERYX</b><br>アークテリクス</a></li>

<li><a href="http://shopping.geocities.jp/store-goods/ecstation/showcase/oroshi_outdoor.html" target="brand"><b>OUTDOOR</b><br>アウトドア</a></li>

<li><a href="http://shopping.geocities.jp/store-goods/ecstation/showcase/oroshi_anello.html" target="brand"><b>ANELLO</b><br>アネロ</a></li>

</ul>

</div>
<!--▲サイド▲-->



<!--▼メイン▼-->
<div id="intromain" name="intromain">

<iframe src="http://shopping.geocities.jp/store-goods/ecstation/showcase/oroshi_anello.html" name="brand" id="brand" width="700" height="930" scrolling="auto" frameborder="0"></iframe>
<a href="" class="kaiin">
>>まずは会員登録へ</a>
<!--▲メイン▲-->
</div><!-- intromain -->
</div><!-- wrap -->

</div>

<!--▼問題個所▼-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript">
        (function(window, $){
    $(window).on("load",function(){
        $('iframe.autoHeight').each(function(){
            var D = $(this).get(0).contentWindow.document;
/*
            console.log(
                D.body.scrollHeight, D.documentElement.scrollHeight,
                D.body.offsetHeight, D.documentElement.offsetHeight,
                D.body.clientHeight, D.documentElement.clientHeight
            );
*/
            var innerHeight = Math.max(
                D.body.scrollHeight, D.documentElement.scrollHeight,
                D.body.offsetHeight, D.documentElement.offsetHeight,
                D.body.clientHeight, D.documentElement.clientHeight
                );
            $(this).removeAttr("height").css('height', innerHeight + 'px');
        });
    });
})(window, jQuery);
    </script>
<!--▲問題個所▲-->
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2017/07/18 16:04

    >いくつか試したのですが、動きません  なぜ動かないのかどう動くと想定どおりなのか調べられた方が。

    キャンセル

回答 2

checkベストアンサー

+1

ドメインをまたぐなら postMessage でないとクロスオリジン制約に引っかかるような。

【window.postMessage - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/postMessage

【[JavaScript] postMessageでクロスドメインメッセージ通信 - Qiita】
http://qiita.com/yasumodev/items/d339a875b4b9bf65d156

iframe側言語(PHPとかRubyとか)で適切なヘッダを返せば回避できますが、提示されている環境で可能かはわかりません。

【JavaScript のクロス ドメイン (Cross-Domain) 問題の回避と諸注意 – Tsmatz】
https://blogs.msdn.microsoft.com/tsmatsuz/2011/06/24/jsonp-cross-domain/

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

常時SSL対応と通常のサイトでのクロスドメインという問題になり、このままでは修正しても出来ないという事になりました。
ありがとうございました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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