从 iframe 调用后菜单无法正确显示答案

【问题标题】：Menu not showing correctly once called from iframe从 iframe 调用后菜单无法正确显示
【发布时间】：2012-09-15 15:21:34
【问题描述】：

我在页面上显示 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 可以用来获取文档的高度？

【问题讨论】：

Left-menu index.htm 中的 iframe 没有 height 属性。（可能无关紧要）
你不需要重复使用 ids I'd=checkbox2 不好的做法 ids 是唯一的，这就是类的用途，也可能是你的问题之一

标签： javascript html css iframe menu

【解决方案1】：

尝试让你所有的 id 都独一无二，复选框 2 更改其中的两个，你可能会没事，因为 ie 非常喜怒无常。标签的标签也是HTML5，你现在应该知道，即讨厌。

【讨论】：

【解决方案2】：

希望您已准备好接受长篇回答 :) 关于为什么你会以你现在的方式处理事情，但会将此作为你正在从事的项目的限制，我有很多问题。 /咳/ 为什么没有 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 或更低版本中不起作用 - 我假设您正在尝试支持它，因为我只在 ie 中看到了您可见的复选框错误。

为了解决这个问题，我添加了一些基本脚本来将类名切换到选定的输入...

<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 元素和跨浏览器测试的 JS 库（如 jQuery）以获得更好的兼容性。更不用说比 iFrame 更好的构造方法了！

再说一遍 - 我假设你只是在这里受到限制。

我觉得我应该指出的另一件事 - 我用来触发输入状态更改的“onclick”功能再次是出于兼容性考虑的选择 - “onchange”功能受支持但不会更新，直到该输入丢失 onblur 使其不同步（更多信息onchange checkbox test page）

我希望这个答案对你有所帮助，即使只是其中的一部分让你朝着正确的方向前进。

【讨论】：

【解决方案3】：

使用重置的 css 文件。 http://meyerweb.com/eric/tools/css/reset/

猜猜它会对你有所帮助。

【讨论】：

【解决方案4】：

例子很牵强，但看起来可能是这一行：

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

（或对输入边距值的其他修改）

尝试修改输入的边距值，看看它是否提供了所需的结果。我的猜测是 iframe 在添加时将输入值推到了左侧。

【讨论】：