динамическая калибровка и позиционирование iframe

Я совершенно новый с веб-дизайном и сценарием. Я пытаюсь создать сайт с рамкой баннера вверху, меню слева и основным содержимым в правой нижней правой части. Я хочу, чтобы баннер динамически изменялся с размером браузера. Я выполнил это на IE8, но он не будет корректно отображаться на IE9, плюс мне понадобилось фоновое изображение, пересекавшее границы рамки. Я в настоящее время пытаюсь использовать iframes, но не могу заставить их заполнить окно браузера. Иногда я могу сделать iframes изменением размера и/или позиции динамически, но не надежным. Я пробовал различные типы позиций, а также обертывал iframes и пытался изменить их размер и позиционировать. Это самый успешный код, который у меня есть, извините за любой избыточный, неопубликованный и прокомментированный код, поскольку он остается неудачным.динамическая калибровка и позиционирование 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>

Я открыт для любых других предложений, но я не хочу использовать серверные скрипты.

источник

2012-06-07 Bradley Winebarger

Ну, в наши дни не рекомендуется использовать iframe (frame: NO way!) Итак, я несколько лет назад сделал an example, как загрузить контент без обновления с помощью ajax. Таким образом, вы можете больше контролировать свой CSS, а затем смешивать его с другими кодами.

Cheers.

PS: Если бы вы могли установить ссылку, чтобы проверить свою работу, я буду здорово !.

источник

2012-06-07 04:00:29 fecapeluda

У меня пока нет сервера для его размещения. Я пытаюсь сделать его пригодным для использования в первую очередь. –

Привет, повторюсь, хорошо, вам не нужен сервер для этого, я вижу, что вы используете HTML или, по крайней мере, пытаетесь использовать мой код. Имейте в виду, если вы попытаетесь использовать iframe, вы должны каждый раз добавлять стиль css или Js-файл на каждую страницу. Приветствия. – fecapeluda

Мне нравится реализация и способ, которым моя страница выглядит с использованием вашего кода, но я еще не получил ее полностью проверить, поскольку xmlhttprequest.open заблокирован в локальных файлах, по крайней мере, в IE и хром. –

динамическая калибровка и позиционирование iframe

ответ

Смежные вопросы