BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

postMessageを使用してiframeの高さを適応させる例

2022-01-28 09:41:32

プリアンブル

フリーマークのようなフロントエンドの離れ業をメインの古いプロジェクトとして無神経に埋め込むために、iframeタグを使うことがあります。

iframe内のコンテンツが親ページで指定された幅と高さより大きい場合、スクロールボックスが表示されることが分かっています。

そこで、iframeの幅と高さを自身のコンテンツに応じて自動的に変更させることが、解決しなければならない問題になります。

HTML5で新たに定義されたwindow.postMessageを用いることで、ウィンドウをまたいだ通信を実現することができます。

デモの動作

デモのアドレスです。 www.mixvjiezi.xyz/demo/iframe

欲しい効果は上の画像の通りです。

黄色い部分がiframeタグで導入したbody.htmlの部分です。

index.htmlです。 

<!DOCTYPE html>
<html lang="en">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js">
    var $ = window.jQuery;
    </script>
  <style>
    .header{
      width: 100%;
      min-width: 1260px;
      height: 70px;
      background-color: red;
      box-shadow: 0 0 5px black;
      border-radius: 10px;
    }
    .center{
      width: 1560px;
      height: 1470px;
      margin: 20px auto;
    }
    .iframe{
      width: 250px;
      height: 250px;
      margin: 20px 0 0 40px;
    }
    .left-nav{
      width: 200px;
      height: 1470px;
      background-color: blue;
      float: left;
      margin-top: 10px;
      box-shadow: 0 0 5px black;
      border-radius: 10px;
    }

  </style>
  <head>
    <meta charset="utf-8" />
    <title>css study</title>
  </head>
<body>
  <div class="header">
  </div>
  <div class="center">
    <div class="left-nav"></div>
    <iframe class="iframe" id="shopIframeId" src=". /body.html" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
  </div>
  <script type="text/JavaScript">
    window.addEventListener('message', e => {
      if (e.data.type === 1) {
        $('#shopIframeId').width(e.data.data.width + 50)
        $('#shopIframeId').height(e.data.data.height + 50)
      }
    });
  </script>
</body>
</html>

body.html。 

 <!DOCTYPE html>
 <html lang="en">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js">
    var $ = window.jQuery;
    </script>
   <style>
   .box{
     width: 200px;
     height: 200px;
     box-shadow: 0 0 5px black;
     border-radius: 10px;
     background-color: yellow;
   }
   </style>
   <head>
     <meta charset="utf-8" />
     <title>css study</title>
   </head>
 <body>
   <div class="box">
   </div>
 </body>
 <script type="text/JavaScript">
 var data = {
   el: $('.box'),
   height: $('.box').outerHeight(),
   width: $('.box').outerWidth(),
   parent: window.parent
 }

 $('.box').on('click', function () {
   // Update the data
   if (data.width < 1250) {
    data.width += 50
   }
   data.height += 50
   // Update the view
   data.el.width(data.width)
   data.el.height(data.height)
   // Notify the parent window of its own height change
   data.parent.postMessage({
     type: 1,
     data: {
       width: data.width,
       height: data.height
     }
   }, '*')
 })
</script>
 </html>

本題

象を入れるには4つのステップが必要なことが分かっています。

postMessage APIを使ったメッセージの送信は、象を乗せるより1ステップ少なく、3ステップで済みます。

それらは

1. 送信オブジェクトを探す

2、メッセージを送信する

3、メッセージの処理を設定する

次に、上の例題を一つずつ使ってみましょう。

1. 送信先オブジェクトの検索

window.parentを使用して、ドキュメントに自身を導入する親ウィンドウオブジェクトを取得します。 

 var data = {
   el: $('.box'),
   height: $('.box').outerHeight(),
   width: $('.box').outerWidth(),
   parent: window.parent
 }

また、このステップでは識別用の dom を初期化し、dom の height と width をリッスンして、そのコアを window.parent で取得します index.htmlファイルのウィンドウ・オブジェクト 

2. iframeでメッセージを送信する 

 $('.box').on('click', function () {   
// Update the data
   if (data.width < 1250) {
    data.width += 50
   }
   data.height += 50
   // Update the view
   data.el.width(data.width)
   data.el.height(data.height)
   // Notify the parent window of its own height change
   data.parent.postMessage({
     type: 1,
     data: {
       width: data.width,
       height: data.height
     }
   }, '*')
 })

ターゲット div を 1 つのイベントにフックし、クリックするたびに幅と高さが 50xp ずつ大きくなります (width が 1250 以上の場合は幅が大きくなることはありません)。

そして、el.postMessage(message, targetOrigin)メソッドを使用してメッセージを送信します。

elです。

el は、iframe の contentWindow プロパティなど、別のウィンドウへの参照であり、その実行は window.open ウィンドウオブジェクトを返すか、名前付きまたは数値でインデックスされた ウィンドウ・フレーム .

メッセージを表示します。

message パラメータには、送信するデータメッセージのボディを指定する。

targetOrigin.

targetOrigin パラメータは、ウィンドウの origin 属性を介してメッセージ イベントを受信できるウィンドウを、文字列 "*" (無制限の場合) または URI として指定するものです。メッセージを送信する際、ターゲットウィンドウのプロトコル、ホストアドレス、ポートのいずれかがtargetOriginで指定した値と一致しない場合、メッセージは送信されません。3つすべてが正確に一致する場合のみ、メッセージは送信されます。

3. メッセージ処理の設定 

 window.addEventListener('message', e => {
      if (e.data.type === 1) {
        $('#shopIframeId').width(e.data.data.width + 50)
        $('#shopIframeId').height(e.data.data.height + 50)
      }
    });

次に、index.html にメッセージリスナーを追加して、メッセージが送られてきたときに iframe タグの幅と高さを更新するハンドラー関数をトリガーするようにしました。

ハンドラ関数は、以下の重要なプロパティを含むメッセージオブジェクトであるパラメータeを渡します。

データです。

他のウィンドウから渡されたオブジェクト。

の元になります。

コール postMessage を呼び出す際に、メッセージ送信者のウィンドウ上で 起源 . この文字列は、プロトコル、"://" 、ドメイン名、" : ポート番号" を連結したものです。例えば、" https://example.org (暗黙のポート 443 )"、" http://example.net (暗黙のポート 80 )"、" http://example.com:8080 "。postMessage が呼び出された後に別の場所に移動する可能性があるため、この原点がウィンドウの現在または将来の原点であることは保証されないことに注意してください。

のソースになります。

にメッセージを送信するためのものです。 ウィンドウ オブジェクトを使用します。これを使用すると、異なるオリジンを持つ2つのウィンドウ間で双方向通信を確立することができます。

概要

メッセージ転送では、typeプロパティを使って、異なるmessage.typeとmessage.dataをiframe内に転送し、親ウィンドウは、異なるmessage.typeに基づいて、適宜処理できるようにしています。

例えば、message.typeが2の場合、message.dataからコンテンツを取得するポップアップレイヤーでアラートをセットアップすることができます。

これにより、iframe内のポップアップが外側を覆わないという問題を解決することができます。

今回は以上です。皆様の学習のお役に立ち、スクリプトハウスをもっと応援していただければと思います。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します