1

jQueryを使用して、コンテンツに基づいてiframeのサイズを動的に変更しているため、スクロールバーは表示されません。スクリプトは非常にシンプルで、IE9 では正常に動作していますが、クロムでは何も起こりません。デバッグ用にのみ小さな「アラート」を追加したところ、変数「cont_height」がクロムで定義されていないことがわかりました。

iframe にロードされたページを含め、すべてのファイルが私のコンピューターにあるため、クロスドメインの問題は発生しません。

Chrome のデバッグ ツールで次のエラーが表示されます。

ここにコードがあります

<script type="text/javascript" src="../js/jquery-1.10.2.min.js"> </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#mainframe').load(function () {
                    var cont_height = $(this).contents().height();
                    alert(cont_height);
                    $(this).height(cont_height);
                });
            });
        </script>

ドキュメントの準備ができているのではなく、「$(window).load」を試してみましたが、タイミングの問題ではないと思います。権限などのためにデータにアクセスできません。ヒントをいただければ幸いです。ソリューションはJavaScriptでも可能です。

4

1 に答える 1

1

これは、コンテンツに基づいて iframe のサイズを変更するために私が見つけた最良の方法です。

<script>
    function resizeMe(id) {

        var theFrame = document.getElementById(id);




        var theBody = (theFrame.contentWindow.document.body || theFrame.contentDocument.body)
        var newHeight = Math.max(theBody.scrollHeight, theBody.offsetHeight, theBody.clientHeight);

        theFrame.height = (newHeight + "px");

    }
</script>


<iframe id="helloworld" ... onload="resizeMe('helloworld')"></iframe>

parent.resizeMe('helloworld') を使用して、iframe ドキュメントから親ドキュメントを呼び出すことができます。

<body onload="parent.resizeMe('helloworld')">
...
</body>

またはあなたがjqueryを持っているので...

<body>
    ...
    ...
    <script>

        $(document).ready(function(){
            parent.resizeMe('helloworld');
        });
    </script>

</body>
于 2013-09-25T16:28:10.220 に答える