BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] コンテンツに応じたiframeのサイズ変更

2022-03-18 16:49:26

質問内容

iGoogleのようなアプリケーションを制作しています。他のアプリケーション（他のドメイン上）のコンテンツは、iframeを使用して表示されます。

iframeのコンテンツの高さに合うようにiframeのサイズを変更するにはどうすればよいですか？

Googleが使用しているjavascriptを解読しようとしましたが、難読化されており、ウェブで検索しても今のところ実りませんでした。

更新しました。 なお、コンテンツは他のドメインから読み込まれるので セイムオリジンポリシー が適用されます。

解決方法は？

私たちもこの種の問題を抱えていましたが、あなたの状況とは少し逆で、他のドメインのサイトにiframedコンテンツを提供していました。 同一生成元ポリシー も問題でした。何時間もグーグル検索に費やした後、最終的に（多少なりとも）実行可能な解決策を発見しました。

同一生成元ポリシーを回避する方法もありますが、iframedコンテンツとフレーミングページの両方を変更する必要があるので、両側で変更を要求する能力がない場合、この方法はあまり役に立たないと思います。

ブラウザの癖で、同じオリジンポリシーを回避することができます。javascriptは、独自ドメインのページ、またはフレーム化されたページと通信できますが、フレーム化されたページと通信することはできません。 

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

では home.html との通信が可能です。 framed.html (イフレーミング)と helper.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.html は、URLの引数を介していました。これを行うには framed.html は、iframe に 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>

関連

最新

おすすめ

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