0

サイズ変更に関する投稿がたくさんあることは知っていiframeますが、見つけたのは次のコードだけです。

<script type="text/javascript" language="JavaScript">
<!--            
        function autoResize(id) {
            var newheight;
            var newwidth;

            if (document.getElementById) {
                newheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
                newwidth = document.getElementById(id).contentWindow.document.body.scrollWidth;
            }
            document.getElementById(id).height = (newheight);
            document.getElementById(id).width = (newwidth);
        };
//-->
</script>

これはサンプルのマークアップ コードです。

<a href="index.php" target="content">Home</a>
<a href="profile.php" target="content">Profile</a>

<iframe src="index.php" name="content" height="500px" width="100%" id="Main_Content" onload="autoResize('Main_Content');"></iframe>

上記のコードは機能していますが、問題が 1 つあります。次のシナリオを検討してください。

index.php page height is 800px

と

profile.php page height is 1200px

ページへのリンクをクリックするとindex.php、iframeのサイズが変更され、ページ800pxへのリンクをクリックするとサイズが変更されますが、これは私の問題です。サイズを変更したり、高さを調整したりしていないため、コンテンツの下に余分なスペースができて見栄えがよくありません。iframeの高さを大きくすることに問題はありませんが、縮小するのに問題があります。誰でも手を差し伸べることができます? どんな助けでも大歓迎です。ありがとう！profile.phpiframe1200pxindex.phpprofile.phpiframe800pxindex.php

4

2 に答える 2

0

問題を再現しました。

問題は、スクロールバーの現在または必要なスペースを意図的に返す scrollHeight と scrollWidth の使用にあるようです。これは、ドキュメント自体のサイズと等しくありません。

私が変わると、問題は解決します

 newheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
 newwidth = document.getElementById(id).contentWindow.document.body.scrollWidth;

の中へ

 newheight = document.getElementById(id).contentWindow.document.body.style.height;
 newwidth = document.getElementById(id).contentWindow.document.body.style.width;

それはあなたにとって実行可能ですか、それともあなたの管理下にありませんか?

于 2013-10-12T22:28:32.607 に答える
0

なぜそうしないのですか：

height: auto;
max-height: 1200px;

style="" 内の iframe 自体、または css doc を介して。

高さが自動に設定されている場合、index.php に 1200px を使用する必要はありません。ただし、profile.php を表示する場合は、最大 1200px を使用できます。

于 2013-10-12T18:31:04.220 に答える