iframe內容高度（Chrome中為null）

Question

我正在使用jQuery根據其內容動態更改iframe的大小，因此它不顯示滾動條。 該腳本非常簡單，並且在IE9中工作正常，但是在chrome中什么也沒有發生，我添加了一個僅用於調試的小“警報”，發現chrome中未定義var“ cont_height”。

所有文件都在我的計算機中，包括iframe中加載的頁面，因此應該沒有跨域問題。

chrome中的調試工具給我這個錯誤：“阻止了一個原點為“ null”的幀訪問原點為“ null”的幀。協議，域和端口必須匹配”。

這是代碼

<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中。

Answer 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>

您可以讓iframe文檔使用parent.resizeMe（'helloworld'）調用父文檔。

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

或者因為您有jquery ...

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

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

</body>

iframe內容高度（Chrome中為null）

問題描述

1 個解決方案

解決方案1
1 已采納 2013-09-25 16:28:10

iframe內容高度（Chrome中為null）

問題描述

1 個解決方案

解決方案1 1 已采納 2013-09-25 16:28:10

解決方案1
1 已采納 2013-09-25 16:28:10