iframe의 동적 크기 조정 및 위치 지정

저는 웹 디자인 및 스크립팅에 새로운 기술을 사용합니다. 상단에 배너 프레임, 왼쪽에 메뉴, 큰 오른쪽 하단에 주요 콘텐츠가있는 사이트를 만들려고합니다. 배너 크기를 동적으로 조정하고 싶습니다. IE8에서이 작업을 수행했지만 Internet Explorer 9에서는 제대로 표시되지 않으며 배경 프레임을 가로 지르는 배경 이미지를 필요로했습니다. 현재 iframe을 시도하고 있지만 브라우저 창을 채울 수 없습니다. 때때로 iframe의 크기 및/또는 위치가 동적으로 변경 될 수는 있지만 신뢰할 수는 없습니다. 나는 다양한 위치 유형을 시도했으며, 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>

나는 다른 제안이 없지만 서버 측 스크립팅을 사용하고 싶지 않습니다.

출처

2012-06-07 Bradley Winebarger

요즘에는 iframe을 사용하지 않는 것이 좋습니다 (프레임 : 안되요!) 그래서 몇 년 전에 나는 ajax를 사용하여 새로 고침하지 않고 콘텐츠를로드하는 방법을 an example으로 만듭니다. 이렇게하면 CSS를 더 잘 제어하고 나중에 다른 코드와 혼합 할 수 있습니다.

건배.

추신 : 귀하의 작품을 확인하기 위해 링크를 설정할 수 있다면, 좋을 것입니다.

출처

2012-06-07 04:00:29 fecapeluda

아직 호스트 할 서버가 없습니다. 먼저 사용할 수 있도록 노력하고 있습니다. –

안녕 다시 메이트, 잘 당신은 그걸 위해 서버가 필요 없어요, 당신은 HTML을 사용하여 또는 적어도 내 코드를 사용해보십시오. iframe을 사용하면 매번 CSS 스타일이나 Js 파일을 각 페이지에 추가해야합니다. 건배. – fecapeluda

구현과 내 페이지가 코드를 사용하는 방식이 마음에 들지만 xmlhttprequest.open이 적어도 IE와 크롬에서는 로컬 파일에 대해 차단되어 있기 때문에 아직 완전히 테스트하지 못했습니다. –

iframe의 동적 크기 조정 및 위치 지정

답변

관련 문제