iframes的动态大小调整和定位
iframes的动态大小调整和定位
提问于 2012-06-07 11:36:33
我是网页设计和脚本的新手。我试图建立一个横幅框架在顶部，菜单在左侧，主要内容在大的右下角部分的网站。我想要的横幅大小动态与浏览器的大小。我在IE8上实现了这一点，但它不能在IE9上正确显示，再加上我想要一个跨越框架边界的背景图像，我目前正在尝试iframes，但不能让它们充满浏览器窗口。有时，我可以让iframe动态改变大小和/或位置，但这并不可靠。我尝试了各种位置类型，以及包装的iframe，并试图调整大小和位置，以及。这是我拥有的最成功的代码，请原谅任何多余的、未引用的和注释的代码，因为它是失败尝试的遗留问题。
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Mountain Girl Gallery</title>
<style media="screen" type="text/css">
<!--
#layer1 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 95px; visibility: visible}
--!>
<!--
#layer2 { position: absolute; top: 95px; left: 500px; width: 100px; height: 505px; visibility: visible}
--!>
<!--
#layer3 { position: absolute; top: 95px; left: 100px; width: 900px; height: 505px; visibility: visible}
--!>
</style>
<script type="text/javascript">
function frameResize(){
var winW;
var winH;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
var bframe=document.getElementById('bannerframe');
//var menuframe=document.getElementById('menu');
var mframe=document.getElementById('main');
//var f1=document.getElementById('bannerframe');
//var f2=document.getElementById('menu');
//var f3=document.getElementById('main');
bframe.style.width=winW;
bframe.style.height=winH*.2;
//menuframe.style.width=winW*.15;
//menuframe.style.height=winH*.8;
//menuframe.style.top=(winH*.2)+"px";
mframe.style.width=winW*.85;
mframe.style.height=winH*.8;
mframe.style.top=(winH*.2)+"px";
mframe.style.left=(winW*.15)+"px";
//f1.style.width=bframe.style.width;
//f1.style.height=bframe.style.height;
//menuframe.style.width=winW*.15;
//menuframe.style.height=winH*.8;
//f2.style.top=menuframe.style.top;
//f3.style.width=mframe.style.width;
//f3.style.height=mframe.style.height;
//f3.style.top=mframe.style.top;
//f3.style.left=mframe.style.left;
}
</script>
<script type="text/javascript">
function setSize(){
frameResize();
if(window.attachEvent)
window.attachEvent("onresize",frameResize);
else if(window.addEventListener)
window.addEventListener("resize",frameResize,false);
}
</script>
</head>
<body
style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(mountain%20girl%20background.JPG); background-attachment: fixed; background-position: 50%; height: 657px;"
onresize="frameResize()">
<div align="center">
<iframe style="position: absolute; top: 0px; left: 0px; width: 1000px; height: 200px;"
src="banner.html" name="bannerframe" id="bannerframe" allowtransparency="true" frameborder="0"></iframe></div>
<iframe style="position: relative; top: 200px; left: 0px;"
src="menu.html" name="menu" id="menu" allowtransparency="true"
frameborder="0"></iframe>
<iframe style="position: relative; top: 200px; left: 150px; width: 850px; height: 505px;"
src="home.html" name="main" id="main" allowtransparency="true" onload="setSize()" frameborder="0"></iframe>
</body>
</html>我对任何其他建议都持开放态度，但我不想使用服务器端脚本。
回答 1
Stack Overflow用户
发布于 2012-06-07 12:00:29
现在不推荐使用iframe (frame:没门！)因此，几年前，我使用an example演示了如何使用ajax加载内容而无需刷新。这样你就可以更好地控制CSS，并在以后将其与其他代码混合在一起。
干杯。
附言:如果你能设置一个链接来检查你的工作，我会很高兴的！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10925361
复制相关文章
相似问题
腾讯云开发者
