那些遇到过的问题

一旦从iframe调用,菜单就无法正确显示

Aar*_*ron 5 html javascript css iframe menu

我在页面上显示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>
Run Code Online (Sandbox Code Playgroud)

我的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>
Run Code Online (Sandbox Code Playgroud)

我的_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 */ }
Run Code Online (Sandbox Code Playgroud)

该页面似乎正确显示,但左侧的菜单显示了一个不应该显示的复选框,并且应该用+或 - 图标重新显示.

如果我打开我的menu.htm它的自我显示正确

在此输入图像描述

但是当我查看我的index.htm页面(它在iframe中加载菜单)时,它没有正确显示菜单,如下所示:

在此输入图像描述

但是,只要我添加以下代码,它就会正确显示菜单:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Run Code Online (Sandbox Code Playgroud)

但是,它没有使用我的win_resize函数正确显示我的文档高度.

我猜测最后一段代码是阻止我的文档高度代码显示正确的高度.

我需要这个功能,所以它可以在页面上正确显示我的菜单框架.

有没有人知道我哪里出错了,因为它的自我工作正常,但很快我从iframe调用它就无法正确显示？

我在我的函数中使用正确的代码来完整地获取文档高度,或者我是否可以使用CSS来获取文档高度？

小智 4

希望您准备好接受长答案:) 我有很多问题，为什么您会以现在的方式处理事情，但会将此视为您正在从事的项目的限制。/咳/为什么没有 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>
Run Code Online (Sandbox Code Playgroud)

我还为此函数添加了 onload 和 onresize 调用，以便您在正确的高度进行初始化，并将大小调整到正确的高度...

<body onload="win_resize()" onresize="win_resize()">
Run Code Online (Sandbox Code Playgroud)

其次，你的伪“checked”类在 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>
Run Code Online (Sandbox Code Playgroud)

您还需要将 .checked 类添加到 css 中的相关样式中，例如

li input:checked + ol, li input.checked + ol
Run Code Online (Sandbox Code Playgroud)

第三，那些讨厌的可见复选框 这是很简单的一点，只需在输入的 CSS 中添加不透明度和即不透明度过滤器即可。

li input {
cursor:pointer;
...
opacity: 0;
filter:alpha(opacity=0);
}
Run Code Online (Sandbox Code Playgroud)

最后——也许是最重要的

我会认真质疑这个构建以及这个导航如何工作的很多问题。当然，您可以使用其他方法，使用本机 html 元素和跨浏览器测试的 JS 库（如 jQuery）来获得更好的兼容性。更不用说比 iFrame 更好的构造方法了！

再说一遍——我假设你只是被限制在这里。

我觉得我应该指出的另一件事 - 是我用来触发输入状态更改的“onclick”函数再次是为了即兼容性而经过深思熟虑的选择 - 支持“onchange”功能，但直到 onblur 丢失后才会更新该输入使其不同步（有关更改复选框测试页面的更多信息）

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

归档时间：

查看次数：

836 次

最近记录：

13 年，3 月 前
相关归档
如何在div中垂直对齐文本？ 1102
Bootstrap模态出现在背景下 554
我应该在Node.JS上使用哪个库进行服务器端图像处理？ 116
$ .when.apply($,someArray)做什么？ 105
ES6 - 在类中调用静态方法 70
Safari 8多选滚动问题 23
如果不在线,从Google或本地加载jQuery 19
如何在css3中创建多色边框 19
Facebook缓存不会刷新？ 6
是否可以使用javascript单击按钮创建iframe 5
难疑归档
"INNER JOIN"和"OUTER JOIN"有什么区别？ 4506
如何删除远程标签？ 3121
撤消git rebase 2965
C#的正确版本号是多少？ 2422
在Python中手动引发(抛出)异常 2079
npm install的--save选项是什么？ 1779
在JavaScript中解析JSON？ 1642
如何将包含历史记录的SVN存储库迁移到新的Git存储库？ 1486
为什么在重写Equals方法时重写GetHashCode很重要？ 1371
为什么Dictionary优先于Hashtable？ 1348