5

私はここ (皆さんに感謝します!) や他の場所のクロスドメイン iframe の投稿をすべて読みました。

クロスドメイン iframeリサイザーの postMessage スクリプト? Firefox 5 以降で美しく動作します。iframe内でページが完全にクリックされるたびに、iframeのサイズが変更されます。

しかし、私のコンピューターの IE (7 8 または 9) ではサイズがまったく変更されません。セキュリティ設定を確認したところ、ドメイン間でアクセスするための IE のセキュリティ設定が有効にチェックされていました。

postMessage は IE で動作しませんか? - または、追加する必要があるものはありますか? ありがとう

4

4 に答える 4

4

これは thomax の優れたスクリプトです。また、iPhone と Android のモバイルでも iframe を使用できるように動作します。

IE7 と IE8 の場合、window.addEventListener の代わりに window.attachEvent を使用する必要があります。また、メッセージの代わりに onmessage にする必要があります (以下を参照) ps また、コンテンツがそのサイズを投稿するサーバーで同じことを行う必要があります。

<script type="text/javascript">
if (window.addEventListener)
{
  function resizeCrossDomainIframe(id) {
    var iframe = document.getElementById(id);
    window.addEventListener('message', function(event) {
      var height = parseInt(event.data) + 32; 
      iframe.height = height + "px";
    }, false);
  }
}
else if (window.attachEvent)
{
  function resizeCrossDomainIframe(id) {
    var iframe = document.getElementById(id);
    window.attachEvent('onmessage', function(event) {
      var height = parseInt(event.data) + 32; 
      iframe.height = height + "px";
    }, false);
  }
}
</script>
于 2012-05-25T18:47:55.743 に答える
2

Peter のコードとhereのいくつかのアイデアを使用すると、実行可能コードから互換性を分離し、クロスサイト検証を追加できます。

<script type="text/javascript">
  // Create browser compatible event handler.
  var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  var eventer = window[eventMethod];
  var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

  // Listen for a message from the iframe.
  eventer(messageEvent, function(e) {
    if (e.origin !== 'http://yourdomain.com' || isNaN(e.data)) return;
    document.getElementById('iframe_id_goes_here').style.height = e.data + 'px';
  }, false);
</script>

また、完全を期すために、サイズ変更をトリガーするときはいつでも iframe 内で次のコードを使用できます。

parent.postMessage(document.body.offsetHeight, '*');
于 2013-08-02T03:22:11.660 に答える
1

これに対するさまざまなソリューションを検討した結果、さまざまなユースケースを考慮して単純な jQuery プラグインを作成することになりました。ポータル ページでユーザーが生成した複数の iFrame をサポートするソリューションが必要だったため、サポートされているブラウザーのサイズが変更され、iFrame の後に読み込まれるホスト ページの JavaScript に対応できました。また、幅へのサイズ変更とコールバック関数のサポートを追加し、body.margin のオーバーライドを可能にしました。おそらくこれをゼロに設定する必要があるからです。

https://github.com/davidjbradshaw/iframe-resizer

ホスト ページは jQuery を使用し、iframe コードは小さな自己完結型の JavaScript であるため、他のユーザー ページの優れたゲストになります。

jQuery は、ホスト ページで初期化され、次の使用可能なオプションがあります。これらの機能の詳細については、GitHub ページを参照してください。

$('iframe').iFrameSizer({
    log: false,
    contentWindowBodyMargin:8,
    doHeight:true,
    doWidth:false,
    enablePublicMethods:false,
    interval:33,
    autoResize: true,
    callback:function(messageData){
        $('p#callback').html('<b>Frame ID:</b> ' + messageData.iframe.id + 
                            ' <b>Height:</b> ' + messageData.height + 
                            ' <b>Width:</b> ' + messageData.width +
                            ' <b>Event type:</b> ' + messageData.type);
    }
});

enablePublicMethods を設定すると、iframe にアクセスして、iFrame サイズを手動で設定したり、ホスト ページから iframe を削除したりすることができます。

于 2014-02-02T14:53:25.457 に答える
1

Ben Alman の実装を使用できます。これは、iframe のサイズ変更の例を含むクロスドメイン通信の例です。

http://benalman.com/code/projects/jquery-postmessage/examples/iframe/

ドキュメントによると、Internet Explorer 6-8、Firefox 3、Safari 3-4、Chrome、Opera 9 で動作します。

于 2012-09-10T09:34:55.913 に答える