iframe 적응형 높이를 구현하는 JS 메서드(IE 및 FireFox와 호환 가능)

이 기사의 예에서는 JS를 사용하여 iframe 적응형 높이를 구현하는 방법을 설명합니다. 참고하실 수 있도록 자세한 내용은 다음과 같습니다.

이전에 FF에서 많은 JS 코드가 바보가 되는 문제로 고민한 적이 있습니다. 나중에 FF와 호환된다고 주장하는 수천 개의 코드 중에서 마침내 다음 코드를 찾아냈습니다. 사용해봤는데 정말 유용하네요. 특히 저처럼 JS 기술이 부족한 사람들에게는(죄송합니다) 이 코드는 간단하고 이해하기 쉽고 수정하기 쉽습니다. iframe이 있는 페이지의 태그에 다음 코드를 복사하여 붙여넣기만 하면 됩니다. 위치를 확인하고 ID 이름만 수정합니다. (수정할 수 있는 곳이 두 군데 있으며, 위치는 코드에 설명되어 있습니다.)

이 코드를 만든 친구에게 경의를 표하세요.

1단계: 태그 아래에 다음 JS 코드를 입력합니다.

<scriptlanguage="javascript">
function adjustFrameSize()
{
  var frm = document.getElementById("iframe1"); //将iframe1替换为你的ID名
  var subWeb = document.frames ? document.frames["iframe1"].document : frm.contentDocument;
  if(frm != null && subWeb !=null)
  {
   frm.style.height="0px";//初始化一下,否则会保留大页面高度
   frm.style.height = subWeb.documentElement.scrollHeight+"px";
   frm.style.width = subWeb.documentElement.scrollWidth+"px";
   subWeb.body.style.overflowX="auto";
   subWeb.body.style.overflowY="auto";
  }
}
</script>

2단계: iframe에 추가합니다. 태그 위 id="iframe1"onload="adjustFrameSize()"

예:

<iframe id="iframe1"onload="adjustFrameSize()" scrolling="no" src="iframe1.html"width="100%" height="300px" target="_self"frameborder="0"></iframe>

이 코드에는 작은 단점, 즉 iframe의 콘텐츠와 외부 테두리가 있습니다. 사용 후 거리(바깥쪽 테두리가 있는 경우)가 약간 작은 경우 적절하게 조정하면 됩니다. 또한 IE6.0 이상 및 FF를 제외한 다른 브라우저에서는 테스트하지 않았으며 다른 결함은 발견되지 않았습니다. 사용 중입니다. 문제를 발견했거나 더 나은 해결책이 있는 아동용 신발을 공유하는 것을 환영합니다.

iframe 페이지 내부에 ajax가 로드된 페이지가 있거나 js를 통한 콘텐츠의 동적 추가로 인해 iframe의 높이가 변경된 경우 다음 메소드를 추가할 수 있습니다.

1: 추가 하위 페이지에 다음 콘텐츠

//修改父窗口地址
function changeHeight(){
window.top.location.hash = "#height=" + $(document).height();
}

dom 부분을 수정하고 이 메서드를 호출합니다.

2:

추가

상위 페이지로

//높은 적응력

var iframe = document.getElementById("iframe1");
function iframeHeight() {
  var hash = window.location.hash.slice(1), h;
  if (hash && /height=/.test(hash)) {
    h = hash.replace("height=", "");
    iframe.style.height = h+"px";
    window.location.hash = "#temp";//防止点击其他页面时高度不变
  }
  setTimeout(iframeHeight, 100);
}
iframeHeight();

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

iframe 적응형 높이(IE 및 FireFox와 호환)를 구현하는 더 많은 JS 방법을 보려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!