Question

我正在尝试使用iframe在一个html中的WebView几个html文件中显示

我在html文件中使用以下脚本，以便调整当前html中iframe的高度。

<body onload="resizeFrames()" link="#bb7722" vlink="#bb7722" alink="#bb7722" > 


    <script type="text/javascript">
        // Firefox worked fine. Internet Explorer shows scrollbar because of frameborder
        function resizeFrames() {
            var all_IFrames = document.getElementsByTagName('iframe');
            i = 0;
            while (frame = all_IFrames.item(i++)) {
                resizeFrame(frame);
            }            
        }
        function resizeFrame(f) {

            f.style.height = f.contentWindow.document.body.scrollHeight + "px";
        }
    </script>

    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="b.html"></iframe>
    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="c.html"></iframe>

为了让javascript工作，我使用了以下代码：

WebSettings webSettings = wb.getSettings();
webSettings.setJavaScriptEnabled(true);

我像这样加载html文件：

webView.loadUrl("file:///android_asset/a.html");

问题是调整大小的iframe的大小有时太大而且太小了。

我使用android 2.2在galaxy s上进行了测试，并且所有帧都较小（最后切断），而在其他设备中使用android 4.0.4，所有帧都更大（添加空白区域）

如果删除webSettings.setJavaScriptEnabled(true);，则galaxy s中的问题会消失，但在第二个设备中，帧根本不会调整大小

完整的HTML代码：

<!DOCTYPE html>
<html>
<head>  
    <style>


    body{
    color: #aa6611;
    font-size:20px;
    }

    .link {
    font-weight: bold;
    color: #bb7722;
    }
    </style>


</head>

<body onload="resizeFrames()" link="#bb7722" vlink="#bb7722" alink="#bb7722" > 


    <script type="text/javascript">
        // Firefox worked fine. Internet Explorer shows scrollbar because of frameborder
        function resizeFrames() {
            var all_IFrames = document.getElementsByTagName('iframe');
            i = 0;
            while (frame = all_IFrames.item(i++)) {
                resizeFrame(frame);
            }           
        }
        function resizeFrame(f) {
            f.style.height = f.contentWindow.document.body.scrollHeight + "px";
        }
    </script>

    <a name="top"></a>


    <font size = "6" color="#ffaa55">Guide</font>
    <br /> 
    <br />

    <a href="#mainscreen" class="link" >Main screen</a> <br />
    <a href="#inventory" class="link">Inventory</a> <br />
    <a href="#store" class="link">Store</a> <br />
    <a href="#market" class="link">Market</a> <br />
    <a href="#creatureattackdialog" class="link">Creature Attack Dialog</a> <br />
    <a href="#userattackdialog" class="link">User Attack Dialog</a> <br />
    <a href="#miniattackdialog" class="link">Mini Attack Dialog</a> <br />
    <a href="#profile" class="link">Profile</a> <br />
    <a href="#creatureinfo" class="link">Creature info</a> <br />
    <a href="#userinfo" class="link">User info</a> <br />
    <a href="#iteminfo" class="link">Item info</a> <br />
    <a href="#lastattackers" class="link">Last Attackers</a> <br />
    <a href="#achievementshistory" class="link">Achievements History</a> <br />
    <a href="#achievementsDialog" class="link">Achievement info</a> <br />
    <a href="#options" class="link">Options</a> <br />


    <br /> 

    <p>
    <a name="mainscreen"></a>
    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="mainscreen.html"></iframe>
    </p>
    <a href="#top" class="link">Back</a> <br />

    <p>
    <a name="inventory"></a>
    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="inventory.html"></iframe>
    </p>
    <a href="#top" class="link">Back</a> <br />

    <p>
    <a name="store"></a>
    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="store.html"></iframe>
    </p>
    <a href="#top" class="link">Back</a> <br />

    <p>
    <a name="market"></a>
    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="market.html"></iframe>
    </p>
    <a href="#top" class="link">Back</a> <br />

    <p>
    <a name="creatureattackdialog"></a>
    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="attackDialogCreature.html"></iframe>
    </p>
    <a href="#top" class="link">Back</a> <br />

    <p>
    <a name="userattackdialog"></a>
    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="attackDialogUser.html"></iframe>
    </p>
    <a href="#top" class="link">Back</a> <br />

    <p>
    <a name="miniattackdialog"></a>
    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="miniattackdialog.html"></iframe>
    </p>
    <a href="#top" class="link">Back</a> <br />

    <p>
    <a name="profile"></a>
    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="profile.html"></iframe>
    </p>
    <a href="#top" class="link">Back</a> <br />

    <p>
    <a name="creatureinfo"></a>
    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="creatureInfo.html"></iframe>
    </p>
    <a href="#top" class="link">Back</a> <br />

    <p>
    <a name="userinfo"></a>
    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="userInfo.html"></iframe>
    </p>
    <a href="#top" class="link">Back</a> <br />

    <p>
    <a name="iteminfo"></a>
    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="itemInfo.html"></iframe>
    </p>
    <a href="#top" class="link">Back</a> <br />

    <p>
    <a name="lastattackers"></a>
    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="lastattackers.html"></iframe>
    </p>
    <a href="#top" class="link">Back</a> <br />

    <p>
    <a name="achievementshistory"></a>
    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="acheivementhistory.html"></iframe>
    </p>
    <a href="#top" class="link">Back</a> <br />

    <p>
    <a name="achievementsDialog"></a>
    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="acheivementDialog.html"></iframe>
    </p>
    <a href="#top" class="link">Back</a> <br />

    <p>
    <a name="options"></a>
    <iframe width="100%" scrolling="no" frameborder=0 border=0 src="optionsDialog.html"></iframe>
    </p>
    <a href="#top" class="link">Back</a> <br />



</body>
</html>

Answer 1

您需要为iframe标记中的onload处理程序设置侦听器，每个标记对应一个，并在iframe未加载主体时调整每个标记的大小。

var iframe = document.getElementById('yourIF');
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
iframe.style.height = (iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight) + "px";

调整WebView中的iframe大小

1 个答案: