コンテンツに基づいて iframe のサイズを変更する質問する

Question

私たちはこの種の問題を抱えていましたが、あなたの状況とは少し逆でした。私たちはiframeコンテンツを他のドメインのサイトに提供していたので、同一生成元ポリシーも問題でした。何時間も Google 検索を続けた結果、ようやく (ある程度) 実行可能な解決策が見つかりました。この解決策は、お客様のニーズに合わせて調整できるかもしれません。

同一生成元ポリシーを回避する方法はありますが、iframe コンテンツとフレーミングページの両方に変更を加える必要があるため、両側で変更をリクエストできない場合は、残念ながらこの方法はあまり役に立ちません。

ブラウザには、同一生成元ポリシーを回避できる奇妙な機能があります。JavaScript は、自身のドメインのページ、または iframe で囲まれたページとは通信できますが、フレーム化されたページとは通信できません。たとえば、次のようになります。

 www.foo.com/home.html, which iframes
 |-> www.bar.net/framed.html, which iframes
     |-> www.foo.com/helper.html

その後、(iframe) および(同じドメイン)home.htmlと通信できるようになります。framed.htmlhelper.html

 Communication options for each page:
 +-------------------------+-----------+-------------+-------------+
 |                         | home.html | framed.html | helper.html |
 +-------------------------+-----------+-------------+-------------+
 | www.foo.com/home.html   |    N/A    |     YES     |     YES     |
 | www.bar.net/framed.html |    NO     |     N/A     |     YES     |
 | www.foo.com/helper.html |    YES    |     YES     |     N/A     |
 +-------------------------+-----------+-------------+-------------+

framed.htmlメッセージを送信できますhelper.html(iframed) が、送信できません home.html(子は親とドメイン間で通信できません)。

ここで重要なのは、helper.htmlがからメッセージを受信できframed.html、と通信することもできるというhome.htmlことです。

つまり、基本的に、framed.htmlがロードされると、は自身の高さを計算し、helper.htmlに通知し、はメッセージをに渡しhome.html、はが配置されている iframe のサイズを変更できますframed.html。

framed.htmlからにメッセージを渡す最も簡単な方法は、helper.htmlURL引数を使用することです。これを行うには、指定されたframed.htmliframeを使用しますsrc=''。onload起動すると、自身の高さを評価し、この時点でiframeのsrcを次のように設定します。helper.html?height=N

ここに説明があるFacebook がそれをどのように処理するかについては、上記の私の説明よりも少しわかりやすいかもしれません。

コード

ではwww.foo.com/home.html、次の JavaScript コードが必要です (ちなみに、これは任意のドメインの .js ファイルから読み込むことができます)。

<script>
  // Resize iframe to full height
  function resizeIframe(height)
  {
    // "+60" is a general rule of thumb to allow for differences in
    // IE & and FF height reporting, can be adjusted as required..
    document.getElementById('frame_name_here').height = parseInt(height)+60;
  }
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>

でwww.bar.net/framed.html：

<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>

<script type="text/javascript">
  function iframeResizePipe()
  {
     // What's the page height?
     var height = document.body.scrollHeight;

     // Going to 'pipe' the data to the parent through the helpframe..
     var pipe = document.getElementById('helpframe');

     // Cachebuster a precaution here to stop browser caching interfering
     pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();

  }
</script>

の内容www.foo.com/helper.html：

<html> 
<!-- 
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content 
--> 
  <body onload="parentIframeResize()"> 
    <script> 
      // Tell the parent iframe what height the iframe needs to be
      function parentIframeResize()
      {
         var height = getParam('height');
         // This works as our parent's parent is on our domain..
         parent.parent.resizeIframe(height);
      }

      // Helper function, parse param from request string
      function getParam( name )
      {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
        if( results == null )
          return "";
        else
          return results[1];
      }
    </script> 
  </body> 
</html>

Answer 1