javascript - 高さ - jquery-iframe-auto-height




iframeのコンテンツに合わせてiframeの幅と高さを調整する (18)

そのコンテンツにほとんどフィットしないiframe widthheight自動調整するソリューションが必要です。 要点は、 iframeが読み込まれた後に幅と高さを変更できることです。 私はiframeに含まれるボディの寸法の変化に対処するためにイベントアクションが必要だと思います。


コンテキスト

私はWeb拡張の文脈でこれを自分で行わなければなりませんでした。 このWeb拡張機能は、各ページにUIの一部を挿入し、このUIはiframe内に存在します。 iframe内のコンテンツは動的なので、 iframe自体の幅と高さを再調整する必要がありました。

私はReactを使用しますが、この概念はすべてのライブラリに適用されます。

私の解決策(これはあなたがページとiframeの両方をコントロールしていることを前提としています)

iframe中で、私はbodyスタイルを本当に大きな次元に変更しました。 これにより、必要なすべてのスペースを使って内部の要素をレイアウトすることができます。 widthheight 100%にすることはできませんでした(iframeにはデフォルトwidth = 300pxheight = 150pxがあるためです)

/* something like this */
body {
  width: 99999px;
  height: 99999px;
}

それから、div内にiframe UIをすべて注入し、スタイルをいくつか与えました

#ui-root {
  display: 'inline-block';     
}

この#ui-root中で私のアプリケーションをレンダリングした後(これは、私がcomponentDidMount中でこれを行いcomponentDidMount )、このdivの寸法を計算して、 window.postMessageを使って親ページに同期します:

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
  type: 'resize-iframe',
  payload: {
    width: elRect.width,
    height: elRect.height
  }
}, '*')

親フレームでは、私は次のようなことをします:

window.addEventListener('message', (ev) => {
  if(ev.data.type && ev.data.type === 'resize-iframe') {
    iframe.style.width = ev.data.payload.width + 'px'
    iframe.style.height = ev.data.payload.height + 'px'
  }
}, false)

IFRAMEコンテンツと親ウィンドウの両方を制御できる場合は、 iFrame Resizerが必要です。

このライブラリを使用すると、同一およびクロスドメインiFramesの高さと幅を自動的にサイズ変更して、その内容に合わせることができます。 iFrameの使用に関する最も一般的な問題に対処するためのさまざまな機能を提供します。

  • コンテンツサイズに対するiFrameの高さと幅のサイズ変更。
  • 複数のネストされたiFrameで動作します。
  • クロスドメインiFramesのドメイン認証。
  • 複雑なCSSレイアウトをサポートするために、さまざまなページサイズの計算方法を提供します。
  • MutationObserverを使用してページのサイズを変更する可能性のあるDOMの変更を検出します。
  • ページのサイズを変更する可能性のあるイベントを検出します(ウィンドウのサイズ変更、CSSのアニメーションとトランジション、オリエンテーション変更とマウスイベント)。
  • postMessage経由のiFrameとホストページ間の簡略化されたメッセージング。
  • iFrameのページリンクを修正し、iFrameと親ページ間のリンクをサポートします。
  • カスタムのサイジングとスクロールの方法を提供します。
  • 親の位置とビューポートのサイズをiFrameに公開します。
  • PDFとODFドキュメントをサポートするためにViewerJSと連携します。
  • IE8へのフォールバックサポート。

iframeのコンテンツが同じドメインからのものである場合、これはうまくいくはずです。 しかし、jQueryが必要です。

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

動的にサイズを変更するには、次のようにします。

<script language="javaScript">
<!--
function autoResize(){
    $('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

次に、iframeが読み込んでいるページにこれを追加します:

<script language="javaScript">
function resize()
{
    window.parent.autoResize();
}

$(window).on('resize', resize);
</script>

jQueryでは、これが私にとって最良の選択肢です。本当に助けてください! 私はあなたを助けるのを待つ!

iframe

<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>

jQuery

<script>            
        var valueSize = $( "#iframe" ).offset();
        var totalsize = (valueSize.top * 2) + valueSize.left;

        $( "#iframe" ).height(totalsize);            

</script>

ヘッダーに配置されるJavascript:

function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }

ここiframe htmlコード:

<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>

CSSスタイルシート

>

.spec_iframe {
        width: 100%;
        overflow: hidden;
    }

いくつかの方法があります:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

他の代替

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

上記の2つの代替案を使ってスクロールを隠す

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

二番目のコードでハックする

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

iFrameのスクロールバーを非表示にするには、スクロールバーを非表示にするために親を「オーバーフロー:非表示」にし、iFrameを最大150%の幅と高さに設定してページ外にスクロールバーを表示させます。スクロールバーがあると、iframeがページの境界を超えているとは思わないかもしれません。 これにより、iFrameのスクロールバーが全幅で表示されなくなります。

ソース: iframeの自動高さを設定する


これは、インラインCSSのみを使用します。

<iframe src="http://example.com" style="resize: both;"               
        onload="this.style.height=this.contentDocument.body.scrollHeight +'px'; this.style.width=this.contentDocument.body.scrollWidth +'px';"
        onresize="this.style.height=this.contentDocument.body.scrollHeight +'px'; this.style.width=this.contentDocument.body.scrollWidth +'px';">
</iframe>

これは実証的な解決策です

function resizer(id)
{

var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;

var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;

}

html

<IFRAME SRC="blah.php" id="iframe1"  onLoad="resizer('iframe1');"></iframe>

これまでに与えられたすべての解決策は、1回限りのサイズ変更を説明しています。 コンテンツが変更された後、iFrameのサイズを変更できるようにしたいと言います。 これを行うには、iFrame内で関数を実行する必要があります(コンテンツが変更されたら、コンテンツが変更されたと言うイベントを発生させる必要があります)。

私はしばらくの間、iFrame内のコードがiFrame内のDOMに制限されているように見えた(iFrameを編集できなかった)ので、iFrameの外で実行されたコードはiFrame外のDOMでスタックされていたiFrame内部からのイベントを受け取る)。

この解決策は、jQueryがどのDOMを使用するかを知ることができることを(同僚の助けによって)発見したことに由来しています。 この場合、親ウィンドウのDOM。

したがって、このようなコードは、(iFrameの内部で実行する)必要なものを実行します。

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#IDofControlFiringResizeEvent").click(function () {
            var frame = $('#IDofiframeInMainWindow', window.parent.document);
            var height = jQuery("#IDofContainerInsideiFrame").height();
            frame.height(height + 15);
        });
    });
</script>

それはそこになかったように動作する "幽霊のような" IFrameを作ることは可能です。

http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/参照してhttp://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

基本的には、 https://developer.mozilla.org/en-US/docs/DOM/window.postMessage parent.postMessage(..)記載されているイベントシステムparent.postMessage(..)を使用しhttps://developer.mozilla.org/en-US/docs/DOM/window.postMessage

これはすべての最新のブラウザで動作します!


コンテンツが非常に単純なhtmlの場合、最も簡単な方法はiframeをjavascriptで削除することです

html:

<div class="iframe">
    <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

javascript:

function removeIframe(obj)(
    var iframeDocument = obj.contentDocument || obj.contentWindow.document;
    var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
    obj.remove();
    document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
}

シンプルさ:

var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
    iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
    iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});

上記の方法ではすべて動作しません。

javascript:

function resizer(id) {
        var doc = document.getElementById(id).contentWindow.document;
        var body_ = doc.body, html_ = doc.documentElement;

        var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
        var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);

        document.getElementById(id).style.height = height;
        document.getElementById(id).style.width = width;

    }

html:

<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv"  >
         <input id="txtHeight"/>height     <input id="txtWidth"/>width     
        <iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0"  ></iframe>
        <iframe src="left.aspx" name="leftFrame" scrolling="yes"   id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
        <iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; "  onload="resizer('Iframe2');" ></iframe>
</div>

Env:IE 10、Windows 7 x64


埋め込みのためのワンライナーソリューション:最小サイズから開始し、コンテンツサイズに増加します。 スクリプトタグは必要ありません。

<iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>


私はこのコードを使って、ページにロードされたときに、すべてのiframeの高さを自動高さ(クラスautoHeight)にしています。 テスト済みで、IE、FF、Chrome、Safari、Operaで動作します。

function doIframe() {
    var $iframes = $("iframe.autoHeight"); 
    $iframes.each(function() {
        var iframe = this;
        $(iframe).load(function() {
            setHeight(iframe);
        });
    });
}

function setHeight(e) {
  e.height = e.contentWindow.document.body.scrollHeight + 35;
}

$(window).load(function() {
    doIframe();
});

私はこのリサイザがうまくいくことを発見しました:

function resizer(id)
{

    var doc = document.getElementById(id).contentWindow.document;
    var body_ = doc.body;
    var html_ = doc.documentElement;

    var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight,     html_.scrollHeight, html_.offsetHeight );
    var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

    document.getElementById(id).height = height;
    document.getElementById(id).width = width;

}

スタイルオブジェクトが削除されていることに注意してください。


私は地球上のすべてを試した後、これは本当に私のために働く。

index.html

<style type="text/css">
html, body{
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0px;   
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>





adjustment