本文介绍了一种使用JavaScript和HTML实现的IFrame高度自适应调整的方法，以及通过鼠标悬停事件显示隐藏Div层的技术。该方案能确保IFrame内容完全可见而不会出现滚动条，并在鼠标悬停时展示额外的信息层。
父文件============
<script language="javascript">
//iframe的高度随内容自动增大，而不产生下拉滚动条。
function autoResize() {
try {
document.all["uploadimg"].style.height=uploadimg.document.body.scrollHeight;
}catch(e){}
}
</script>
<iframe name="uploadimg" id="uploadimg" height='24' marginwidth="3" marginheight="3" scrolling="no" border="0" frameborder="0" src="xxx.php" style='height:expression(1); aho:expression(autoResize()); width:100%;'></iframe>
子文件=============
<html><head></head><body style="margin:0"><span onMouseOver="showFile()" onmouseout="closeFile()"><font size=2>已上传: xxxx.jpg</font></span><div style="position: absolute; display:none;width: 409px; height: 235px; z-index: 1000; left: 1px; top: 18px; background-color: #800000" id="show_layer"></div>
<SCRIPT language=JavaScript>
function showFile(){
var ly = document.getElementById("show_layer");
ly.style.display = "block";
}
function closeFile(){
var ly = document.getElementById("show_layer");
ly.style.display = "none";
}
</script>
</body></html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
