一旦从iframe调用，菜单就无法正确显示
我在页面上显示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 个答案:
答案 0 :(得分：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中的相关样式 e.g。
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）
我希望这个答案可以帮助你，即使只有一部分可以让你朝着正确的方向前进。
答案 1 :(得分：3)
使用重置css文件。 http://meyerweb.com/eric/tools/css/reset/
猜猜它会对你有帮助。
答案 2 :(得分：0)
这个例子非常复杂，但看起来可能是这一行：
li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
（或对输入的边距值的其他修改）
尝试修改输入的边距值，看看它是否提供了所需的结果。 我的猜测是iframe在添加时将输入值推得太远了。
答案 3 :(得分：0)
尝试使所有的id都独一无二，复选框2更改其中的两个并且你可能没问题因为即非常有气质。标签的标签也是HTML5，你现在应该知道，即讨厌。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？