ホームページを作っていて「iframe」で苦戦

2015.06.25 Thursday 15:11
0
    ホームページを3個掛け持ちで作っているとき、iframeを使ったホームページを作ると、2種類のホームページをひとつのホームページとして、見せることが出来る。

    やっぱり、作るのだから、かっこよく作りたい。
    高さ調整を自動にして、スクロールバーは極力出ないようにしようと思う。

    そこで、プラグインを使う方法を考えてみたが、iframeの高さを調整するプラグイン、「jquery.js」「jquery.iframe-auto-height.js」を使うと出来るようになる。
    ただ、これは、同じドメイン上でのみでしか、作動しない。
    これでは、綺麗にはいかない。
    簡単なんだけどね。

    少し面倒でも、違う方法を考えてみた。
    javaスクリプトを使った方法にすることに・・・
    HTMLを記述しないと動かない。
    危険すぎかな?
    いやいや、やらないと、かっこよくならない。

    ・・・ということで

    まずは、iframeを設置する側に

    headに
    1 <script>
    2 window.addEventListener("message", receiveSize, false);
    3 function receiveSize(e) {
    4 if (e.origin === "http://memory.micromotorhome.com")
    5 document.getElementById("bar").style.height = e.data + "px";
    6 }
    7 </script>

    HTMLに
    1 <iframe id="bar" src="http://memory.micromotorhome.com" scrolling="no"></iframe>

    で記述したアドレスを合わせる
    で記述したIDを合わせる

    次に、iframeで読み込まれる側に

    headに
    1 <script>
    2 window.addEventListener("load", postSize, false);
    3 function postSize(e){
    4 var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
    5 if (typeof target != "undefined" && document.body.scrollHeight)
    6 target.postMessage(document.getElementById("foo").scrollHeight, "*");
    7 }
    8 </script>

    HTMLに
    1 <div id="foo" style="height:1000px;">
    2 <!-- ここにHTMLを書く -->
    3 </div>

    で休暇村したIDを合わせる

    これで、iframeを使ったホームページが出来たよ。
     
    category:ツール | by:博士 | - | - | -

    Calender
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
    << October 2019 >>
    Selected entry
    Category
    Archives
    Recent comment
    Link
    Profile
    Search
    Others
    Mobile
    qrcode
    Powered
    無料ブログ作成サービス JUGEM