javascript - 从 iframe 调用后菜单无法正确显示

标签 javascript html css iframe menu

我在页面上显示 iframe 时遇到问题。

我有一个顶部框架，顶部显示 Logo (很好) 我在页面左侧有一个菜单。 (我有问题) 我在菜单右侧有一个框架，可以显示我的页面。

我的 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，它会正确显示

enter image description here

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

enter image description here

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

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

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

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

我需要该功能，以便它可以在页面上正确显示我的菜单框架。

有谁知道我哪里出错了，因为它本身运行良好，但是当我从 iframe 调用它时它无法正确显示？

我可以在我的函数中使用正确的代码来获取文档的完整高度，还是可以使用 CSS 来获取文档的高度？

最佳答案

希望你准备好接受一个长答案:) 我有很多问题，为什么你会按照你现在的方式处理事情，但会把它作为你正在从事的元素的限制。/咳/为什么没有 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()">

其次，你的伪“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>

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

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

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

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

最后 - 也许是最重要的

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

再说一遍 - 我假设您只是受限于此。

我觉得我应该指出的另一件事是我用来触发输入状态更改的“onclick”功能是为 ie Compatibilty 再次深思熟虑的选择 - 支持“onchange”功能但直到丢失该输入的 onblur 使其不同步(更多信息 onchange checkbox test page)

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

关于javascript - 从 iframe 调用后菜单无法正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12560409/

上一篇：html - 从 SVG 链接到外部样式表时为 "Security restrictions"(作为图像嵌入时)

下一篇：javascript - 使用html5 canvas在圆形中以不同 Angular 显示不同值

相关文章：

javascript - ionic - 页面内容仅在单击菜单切换后可见

javascript - 将不同宽高比的图像均匀地放入多行

html - CSS 文本抖动 firefox

CSS字体链接

html - 如何使用 CSS 在我的表单周围放置边框？

javascript - 使用 WebStorm 以十六进制查看监 window 口中的变量

javascript - 如何在 jQuery html() 之后使用 ID 选择器

css - DIV 中的图像 - 垂直居中

html - 填充和边框不适用于 tr 标签

css - (Chrome)李悬停不工作

©2024 IT工具网  联系我们