Javascript 从iframe调用后，菜单未正确显示_Javascript_Html_Css_Iframe_Menu

Javascript 从iframe调用后，菜单未正确显示

javascript html css iframe menu

Javascript 从iframe调用后，菜单未正确显示,javascript,html,css,iframe,menu,Javascript,Html,Css,Iframe,Menu,我在页面上显示iframe时遇到问题我有一个顶部框架，沿顶部显示徽标（这很好）我在这一页的左边有一个菜单。（我对此有意见）我在菜单右侧有一个框架，可以显示我的页面我的index.htm页面正在加载所有帧，如下所示： <script language="javascript"> function win_resize() { var _docHeight = (document.height !== undefined) ? document

我在页面上显示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，它会正确显示

但是，当我查看我的index.htm页面（在iframe中加载菜单）时，它无法正确显示菜单，如下所示：

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

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

但是，使用win_resize功能无法正确显示文档高度

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

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

有人知道我哪里出错了吗，因为它本身工作正常，但我从iframe调用它时，它就无法正确显示

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

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

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

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

尝试修改输入的边距值，看看它是否提供了所需的结果。我的猜测是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>

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

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

最后-也许最重要的是

我会认真地询问很多关于这个构建以及这个导航是如何工作的。当然，您可以使用其他方法，使用原生html元素和跨浏览器测试的JS库（如jQuery），以获得更好的兼容性。更不用说比iFrame更好的施工方法了

再说一次，我假设你只是被限制在这里

还有一件事我觉得我应该指出——我用来触发输入状态变化的“onclick”功能是ie兼容性的一个慎重选择——支持“onchange”功能，但直到输入的onblur丢失而不同步时才会更新（更多信息）

我希望这个答案能帮助你，即使只是其中的一部分能帮你找到正确的方向。

试着让你所有的ID都是唯一的，复选框2更改其中的两个，你可能就没事了，因为ie脾气很坏。标签的标签还有HTML5，您现在应该知道了，ie讨厌它。

左菜单

iframe在

index.htm

中没有

height

属性。（可能不相关）您不需要重复使用ID I'd=checkbox2错误做法ID是唯一的，这就是类的用途，也可能是您的问题之一

<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>

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

<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>

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

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