JavaScriptのiframeのスクロールバーを使わずにURLコンテンツのiframeベースのサイズを変更するには

Question

私のアプリケーションでは、ドロップダウンボックスから選択したドロップダウンボックスがあります。スクロールバーなしのコンテンツに応じてiframeの高さを増やす必要があるanybodはiframeのスクロールバーを使わずにURLコンテンツのiframeベースのサイズを変更する方法を教えてください。

Answer 1

iframeは自動的にターゲットコンテンツのサイズに収まることはありません。つまり、iframeの幅や高さに「自動」値がない場合は、フレームのサイズを指定する必要があります。

この問題を解決するには、選択したURLの横にiframeに渡すことができるように、コンテンツのサイズを事前に把握しておく必要があります。あなたはそれを行うためにデータ属性を使うことができます。ここ

HTML

<select id="frameURL"> 
    <option value="http://www.url1.com/" data-cheight="600">URL 1</option> 
    <option value="http://www.url2.com/" data-cheight="750">URL 2</option> 
    <option value="http://www.url3.com/" data-cheight="1200">URL 3</option> 
</select> 

<iframe scrolling="no" style="display:none;" id="myFrame" src=""></iframe> 

JS/jQueryの

$("#frameURL").change(function(){ 
    // get URL 
    var target = $(this).find("option:selected").val(); 
    // default fixed Width of content area 
    var cntWidth = 500; 
    // get content height from data-cheight 
    var cntHeight = $(this).find("option:selected").attr("data-cheight"); 

    // pass all attributes to the iframe 
    $("#myFrame").attr({ 
    src: target, 
    width: cntWidth, 
    height: cntHeight 
    }); 

    // hide iframe when src attribute is empty/no URL chosen 
    !$("#myFrame").attr("src") ? $("#myFrame").hide() : $("#myFrame").show(); 
}); 

を参照してくださいワーキングモデル：https://jsfiddle.net/xxgs901u/3/

Answer 2

あなたが直接それからのiframeのコンテンツにアクセスすることはできませんが、親ウィンドウです。 iframeのソースがアプリケーションの内部ページである場合は、cross-document messagingでこれを実現できます。親で

$(document).ready(function() { 
    parent.postMessage({ height: $('html').height(), width: $('html').width() }, "*"); 
}); 

：iframe内

$(document).ready(function() { 
    // Create IE + others compatible event handler 
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
    var eventer = window[eventMethod]; 
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 

    // Listen to message from child window 
    eventer(messageEvent,function(e) { 
     $('iframe').width(e.data.width); 
     $('iframe').height(e.data.height); 
    },false); 
}); 

必要な場合は、IFRAMEのコンテンツの変更の大きさならばより多くのイベントをリサイズ送信することができます。