0

ページに iframe があり、コンテンツが変更されるたびにサイズを変更して、スクロールバーがないようにします。URLは変えなくてもフレームの内容は頻繁に変わります。フレームのサイズ変更中に画面がちらつくことなく、フレームのすべてのコンテンツを常に表示したい。親とフレームは同じドメインにあります。

現在、サイズが変更されたと思われるときはいつでもフレームサイズを設定する関数を呼び出します。この関数をどこでも呼び出さずにこれを行うにはどうすればよいですか?

それが役立つ場合、私は angularJS を使用しています。

4

4 に答える 4

1

[iframe] で iFrame コンテンツの高さを取得できます.contentWindow.document.body.offsetHeight。コンテンツのサイズがいつ変更されるかわからない場合は、 を使用して手動で確認する必要がありますsetInterval()。

于 2013-07-26T17:58:01.107 に答える
1

iframe のサイズを自動的に変更するためのドロップイン js モジュールであるiframe-resizerを試してください。

于 2015-03-26T09:54:49.380 に答える
0

これを試して、イベント リスナーでサイズ変更関数を呼び出します。iframe が読み込まれるたびに、これがトリガーされます。

var iframe = document.getElementById('myIframe');
    var resizeFunction= function() {$("#myIframe").css({
       height: iframe.$("body").outerHeight()
    });};
    if(iframe.addEventListener){
        iframe.addEventListener('load', resizeFunction, true);
    }else if(iframe.attachEvent){
        iframe.attachEvent('onload',resizeFunction);
    }
于 2013-07-26T18:32:32.763 に答える
0

これは、私のサイトの 1 つで使用した関数です。ディレクティブに入れるコードを修正しました。

注 : iframe では、コンテナに ID が必要ですifrm_container

<iframe resize-iframe id="iframe" src="...">

.directive('resize-iframe', function() {
    return {
       restrict: 'A',
       link: function ( scope, elm, attrs ) {

        var container = elm.contentWindow.document.getElementById('ifrm_container'); // Iframe container. Usualy a div. 

        function autoResize(){
             ifrmNewHeight = container.offsetHeight; // New height of the document.

             if(ifrmNewHeight !== ifrmOldHeight) {
                ifrmOldHeight = ifrmNewHeight + 30; // +30 for no scrollbar.
                ifrm.style.height= (ifrmNewHeight + 30) + "px"; // Set iframe style.
             }

            setTimeout(autoResize, 250);
        }
      // First call of autoResize().
      autoResize();
  };
});

IE7 を含むすべてのブラウザーでこのソリューションをテストしましたが、うまく機能しますが、ディレクティブでは機能しません (いくつかの要素が変更されました)。

この指令はテストされていません

于 2013-07-26T19:06:34.877 に答える