javascript - iframe から呼び出されるとメニューが正しく表示されない

Question

ページに iframe を表示する際に問題が発生しています。

上部にロゴを表示する上部フレームがあります (これで問題ありません)。ページの左側にメニューがあります。（問題があります）メニューの右側に自分のページを表示するフレームがあります。

私の index.htm ページはすべてのフレームをロードしており、次のようになっています。

<script language="javascript">  
    function win_resize()
    {
        var _docHeight = (document.height !== undefined) ? document.height : document.body.offsetHeight; 
            document.getElementById('leftMenu').height = _docHeight - 90;
    }
</script>

<body onresize="win_resize()">
     <!-- Header -->
    <div id="header">
        <div>
            <img src="logo.png">
        </div>
    </div>

     <!-- Left Menu -->
    <div id="left-sidebar" >
        <iframe id="leftMenu" src="menu.htm" STYLE="top:72px; left:0px; position:absolute;" NAME="menu" width="270px" frameborder="0"></iframe>
    </div>

     <!-- Main Page --> 
    <div id="content">
        <iframe src="users1.htm" STYLE="top:72px" NAME="AccessPage" width="100%" height="100%" frameborder="0"></iframe>
    </div>
</body>

私の menu.htm ページには次のコードがあります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-GB">

<head>
    <link rel="stylesheet" type="text/css" href="_styles.css" media="screen">
</head>
<body>

    <ol class="tree">
        <li>
            <li class="file"><a href="file1.htm">File 1</a></li>
            <li class="file"><a href="file2.htm">File 2</a></li>
            <li class="file"><a href="file3.htm">File 3</a></li>
            <li class="file"><a href="file4.htm">File 4</a></li>
            <li class="file"><a href="file5.htm">File 5</a></li>

        </li>
    <li>
            <label for="folder2">My Test 1</label> <input type="checkbox" id="folder2" /> 

            <ol>
            <li class="file"><a href="status.htm">Settings</a></li>
                <li>

                    <label for="subfolder2">test1</label> <input type="checkbox" id="subfolder2" /> 
                    <ol>
                        <li class="file"><a href="">file1</a></li>
                        <li class="file"><a href="">file2</a></li>
                        <li class="file"><a href="">file3</a></li>
                        <li class="file"><a href="">file4</a></li>
                        <li class="file"><a href="">file5</a></li>
                        <li class="file"><a href="">file6</a></li>
                    </ol>
                </li>
                <li>
                    <label for="subfolder2">test2</label> <input type="checkbox" id="subfolder2" /> 
                    <ol>
                        <li class="file"><a href="">file1</a></li>
                        <li class="file"><a href="">file2</a></li>
                        <li class="file"><a href="">file3</a></li>
                        <li class="file"><a href="">file4</a></li>
                        <li class="file"><a href="">file5</a></li>
                        <li class="file"><a href="">file6</a></li>
                    </ol>
                </li>
                <li>
                    <label for="subfolder2">test3</label> <input type="checkbox" id="subfolder2" /> 
                    <ol>
                        <li class="file"><a href="">file1</a></li>
                        <li class="file"><a href="">file2</a></li>
                        <li class="file"><a href="">file3</a></li>
                        <li class="file"><a href="">file4</a></li>
                        <li class="file"><a href="">file5</a></li>
                        <li class="file"><a href="">file6</a></li>
                    </ol>
                </li>
    </li>
    <li>
            <label for="folder2">My Test 2</label> <input type="checkbox" id="folder2" /> 

            <ol>
            <li class="file"><a href="status.htm">Settings</a></li>
                <li>

                    <label for="subfolder2">test1</label> <input type="checkbox" id="subfolder2" /> 
                    <ol>
                        <li class="file"><a href="">file1</a></li>
                        <li class="file"><a href="">file2</a></li>
                        <li class="file"><a href="">file3</a></li>
                        <li class="file"><a href="">file4</a></li>
                        <li class="file"><a href="">file5</a></li>
                        <li class="file"><a href="">file6</a></li>
                    </ol>
                </li>
                <li>
                    <label for="subfolder2">test2</label> <input type="checkbox" id="subfolder2" /> 
                    <ol>
                        <li class="file"><a href="">file1</a></li>
                        <li class="file"><a href="">file2</a></li>
                        <li class="file"><a href="">file3</a></li>
                        <li class="file"><a href="">file4</a></li>
                        <li class="file"><a href="">file5</a></li>
                        <li class="file"><a href="">file6</a></li>
                    </ol>
                </li>
                <li>
                    <label for="subfolder2">test3</label> <input type="checkbox" id="subfolder2" /> 
                    <ol>
                        <li class="file"><a href="">file1</a></li>
                        <li class="file"><a href="">file2</a></li>
                        <li class="file"><a href="">file3</a></li>
                        <li class="file"><a href="">file4</a></li>
                        <li class="file"><a href="">file5</a></li>
                        <li class="file"><a href="">file6</a></li>
                    </ol>
                </li>
    </li>
</body>
</html>

私の _styles.css ファイルには次のものがあります。

/* Just some base styles not needed for example to function */
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }

body, form, ul, li, p, h1, h2, h3, h4, h5
{
    margin: 0;
    padding: 0;
}
body { background-color: #606061; color: #ffffff; margin: 0; }
img { border: none; }
p
{
    font-size: 1em;
    margin: 0 0 1em 0;
}

html { font-size: 100%; /* IE hack */ }
body { font-size: 1em; /* Sets base font size to 16px */ }
table { font-size: 100%; /* IE hack */ }
input, select, textarea, th, td { font-size: 1em; }

/* CSS Tree menu styles */
ol.tree
{
    padding: 0 0 0 30px;
    width: 300px;
}
    li 
    { 
        position: relative; 
        margin-left: -15px;
        list-style: none;
    }
    li.file
    {
        margin-left: -1px !important;
    }
        li.file a
        {
            background: url(document.png) 0 0 no-repeat;
            color: #fff;
            padding-left: 21px;
            text-decoration: none;
            display: block;
        }
        li.file a[href *= '.pdf']   { background: url(document.png) 0 0 no-repeat; }
        li.file a[href *= '.html']  { background: url(document.png) 0 0 no-repeat; }
        li.file a[href $= '.css']   { background: url(document.png) 0 0 no-repeat; }
        li.file a[href $= '.js']        { background: url(document.png) 0 0 no-repeat; }
    li input
    {
        position: absolute;
        left: 0;
        margin-left: 0;
        opacity: 0;
        z-index: 2;
        cursor: pointer;
        height: 1em;
        width: 1em;
        top: 0;
    }
        li input + ol
        {
            background: url(toggle-small-expand.png) 40px 0 no-repeat;
            margin: -0.938em 0 0 -44px; /* 15px */
            height: 1em;
        }
        li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
    li label
    {
        background: url(folder-horizontal.png) 15px 1px no-repeat;
        cursor: pointer;
        display: block;
        padding-left: 37px;
    }

    li input:checked + ol
    {
        background: url(toggle-small.png) 40px 5px no-repeat;
        margin: -1.25em 0 0 -44px; /* 20px */
        padding: 1.563em 0 0 80px;
        height: auto;
    }
        li input:checked + ol > li { display: block; margin: 0 0 0.125em;  /* 2px */}
        li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }

ページは正しく表示されているように見えますが、左側のメニューには、+ または - アイコンで解放すべきではないチェックボックスが表示されます。

自分で menu.htm を開くと、正しく表示されます

ここに画像の説明を入力

ただし、index.htm ページ (iframe にメニューをロードするページ) を表示すると、以下に示すようにメニューが正しく表示されません。

ここに画像の説明を入力

ただし、次のコードを追加するとすぐに、メニューが正しく表示されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

ただし、win_resize 関数を使用してもドキュメントの高さが正しく表示されません。

コードの最後のビットが、ドキュメントの高さコードが正しい高さを表示するのを妨げていると推測しています。

メニューフレームをページに正しく表示するには、その機能が必要です。

それ自体は正常に動作しますが、iframeから呼び出すとすぐに正しく表示されないため、どこが間違っているのか誰かが知っていますか?

関数で正しいコードを使用してドキュメントの高さを完全に取得するか、ドキュメントの高さを取得するために使用できる CSS がありますか?

score 4 · Accepted Answer

長い回答の準備ができていることを願っています:)なぜあなたが自分のやり方で物事にアプローチするのかについて、私はたくさんの質問がありますが、これをあなたが取り組んでいるプロジェクトの制約と見なします. /咳/ jQuery などがないのはなぜですか? /咳/

まず、iFrame の高さの問題: 次の ように、テスト済みのクロスブラウザーの高さ検出機能を組み込むようにコードを変更しただけです。

<script language="javascript">

    function win_resize()
    {   
        var _docHeight = getDocHeight();
        document.getElementById('leftMenu').height = _docHeight - 90;
    }

    //This fixes your calculation of height issue
    //Cross browser doc height calculator **Credit to http://james.padolsey.com**
    function getDocHeight() {
        var D = document;
        return Math.max(
            Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
            Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
            Math.max(D.body.clientHeight, D.documentElement.clientHeight)
        );
    }
</script>

また、この関数に onload と onresize の呼び出しを追加したので、正しい高さで初期化され、正しい高さにサイズ変更されます...

<body onload="win_resize()" onresize="win_resize()">

次に、疑似「チェック済み」クラスは ie8 以下では動作しません。

この問題を解決するために、クラス名を選択した入力に切り替える基本的なスクリプトを追加しました...

<script type="text/javascript">
    function getCheckedState(e){
    var inputId = e.id;
    var getCheckedState = document.getElementById(inputId).checked;

    if (getCheckedState == true) {
        /*if checked add class*/
        e.className += " " + 'checked';
    } else {
        /*if not checked set class to empty string*/
        e.className = "";
    }
}

</script>

また、.checked クラスを CSS の関連するスタイルに追加する必要があります。

li input:checked + ol, li input.checked + ol

第三に、それらの厄介な目に見えるチェックボックス これは簡単なビットでした。入力のcssに不透明度と不透明度フィルターを追加するだけです。

li input {
cursor:pointer;
...
opacity: 0;
filter:alpha(opacity=0);
}

最後に - おそらく最も重要なこと

このビルドとこのナビゲーションのしくみについて真剣に質問します。互換性を向上させるために、ネイティブの html 要素と、jQuery などのクロスブラウザーでテストされた JS ライブラリを使用する別の方法が確実に存在します。iFrame よりも優れた構築方法は言うまでもありません。

繰り返しますが、ここでは単に制約を受けていると思います。

私が指摘しなければならないもう1つのこと-入力状態の変更をトリガーするために使用する「onclick」関数は、つまり互換性のために再び意図的な選択であることです-「onchange」機能はサポートされていますが、onblurが失われるまで更新されませんその入力の同期が取れていない（詳細については、チェックボックスのテストページを変更してください）

この回答の一部だけで正しい方向に進んだとしても、この回答がお役に立てば幸いです。

score 3 · Accepted Answer

リセット css ファイルを使用します。http://meyerweb.com/eric/tools/css/reset/

それはあなたを助けると思います。

score 0 · Accepted Answer

この例は非常に複雑ですが、次の行のように見えます。

li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }

(または入力のマージン値に対する別の変更)

入力のマージン値を変更してみて、目的の結果が得られるかどうかを確認してください。私の推測では、追加時にiframeが入力値を左に押し出しすぎていると思います。

score 0 · Accepted Answer

すべての ID を一意にしてみてください。チェックボックス 2 でそのうちの 2 つを変更してください。タグのラベルも HTML5 です。

javascript - iframe から呼び出されるとメニューが正しく表示されない

4 に答える 4

Related

Reference