1

画像といくつかのデータ行 (クロスドメイン) を取り込む iframe があります。iframe は、次のような埋め込みの JavaScript ファイルで作成されます。

    <script type="text/javascript" src="http://www.domain.com/blah/scriptfile.js?blah_id=001" id="blah_script"></script>

iframe が作成され、画像とデータが完全にロードされています...これまでのところ、とても良いです。

iframe内では、データの行を非表示にしてiframeの高さを短くしたい[-]、画像をクリックすると[+] iframeの高さを拡大して行を再表示します。行を に配置しました。

以下は、onclick と呼ばれる関数のカットバック バージョンです (そして、それは呼び出されています)。関数の最初の行は、szFrameName を生成する方法を示しており、$folder_id は 001 であり、szSpanName に反映されています。alert() が呼び出されると、「blah_iframe_001 blah_cmpnt_001」と表示されるため、名前は正しいですが、document.getElementById は blah_iframe で null を返しますが、blah_cmpnt_ では正常に動作します。

function onclickToggle()
{
  var szFrameName = 'blah_iframe_' +"<?php echo $folder_id; ?>";
  var szSpanName = "blah_cmpnt_" +"001";
  var idFrame = document.getElementById(szFrameName);
  var idCmpnt = document.getElementById(szSpanName);

  alert(szFrameName +" " +szSpanName);
}

window.frameElement を試してみましたが、「アクセスが拒否されました」というエラーが発生するため、iframe のサイズを変更/短縮するにはどうすればよいですか?

4

2 に答える 2

1

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

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

iFrame コードは自己完結型の JavaScript に過ぎないため、他のユーザーのページにうまく表示されます。

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

iFrameSizer({
    log: false,
    bodyMargin:null,
    sizeHeight:true,
    sizeWidth: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-01-28T10:42:06.577 に答える