5

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

4

4 回答 4

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>

我还为这个函数添加了一个 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 才会更新该输入使其不同步（有关更改复选框测试页面的更多信息）

我希望这个答案能帮助你，即使它的一部分让你朝着正确的方向前进。

于 2012-11-11T01:40:34.337 回答
3

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

猜猜它会帮助你。

于 2012-11-05T09:16:24.623 回答
0

该示例非常复杂，但看起来可能是这一行：

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

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

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

于 2012-09-24T07:29:17.567 回答
0

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

于 2012-11-11T18:17:05.593 回答