이 기사에서는 iframe 적응력 높이를 구현하는 JS 방법에 대해 설명합니다. 다음과 같이 참조에 대해 공유하십시오.
나는 이전에 iframes의 높은 수준의 적응성에 어려움을 겪었으며 많은 JS 코드가 FF에서 멍청한 것 같습니다. 나중에, 다음 코드는 마침내 FF와 호환되는 것으로 주장되는 수천 개의 코드 파일에서 나에게 검색되었습니다. 나는 그것을 사용했습니다. 정말 사용하기 쉽습니다. 특히 JS 수준이 낮은 나와 같은 사람들 에게이 코드는 간단하고 이해하기 쉽고 수정하기 편리합니다. 다음 코드를 iframe이 위치한 페이지의 <body> 태그에 붙여 넣고 ID 이름을 수정하기 만하면됩니다 (수정할 장소가 두 개이며 위치는 코드에 설명되어 있음).
이 코드를 만든 친구들에게 경의를 표하십시오.
1 단계 : <body> 태그 아래에 다음 JS 코드를 입력하십시오.
<scriptLanguage = "javaScript"> function actionframesize () {var frm = document.getElementById ( "iframe1"); // iframe1을 ID 이름으로 바꾸십시오. var subweb = document.frames? document.frames [ "iframe1"]. 문서 : 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 단계 : id = "iframe1"onload = "AdjureFramesize ()"를 iframe 태그에 추가하십시오
예를 들면 : 사본 코드 코드는 다음과 같습니다. <iframe id = "iframe1"onload = "ArctionFramesize ()"Scrolling = "no"src = "iframe1.html"width = "100%"target = "_ self"frameborder = "0"> </iframe>
이 코드에는 작은 단점이 있습니다. 즉, Iframe의 내용과 외부 테두리 (외부 테두리가 존재하는 경우) 사이의 거리가 약간 작으므로 스스로 적절하게 조정할 수 있습니다. 또한 IE6.0 이상 및 FF를 제외한 다른 브라우저는 테스트되지 않았으며 다른 결함은 발견되지 않았습니다. 사용 중에 문제가 발생하거나 더 나은 솔루션이 있으면 공유하십시오.
iframe 페이지에 Ajax-Loaded 페이지가 포함되어 있거나 JS를 통해 컨텐츠를 동적으로 추가하면 다음 방법을 추가 할 수 있습니다.
1 : 하위 페이지에 다음 내용을 추가하십시오
// 부모 창 주소 수정 함수 changeHeight () {wind이 방법을 호출하려면 DOM의 일부를 수정하십시오.
2 : 부모 페이지를 추가하십시오
// height adaptive var iframe = document.getElementById ( "iframe1"); 함수 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 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript의 JSON 작동 기술 요약", "JavaScript 스위치 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript Effects and Techniques의 요약", "Javascript Errors" "" ","JavaScript Techrors "" ","Javascript Errors "", "요약" "", "JavaScript Effects"의 요약 "" ","JavaScript 검색 알고리즘 기술 요약 "을 확인하십시오. 데이터 구조 및 알고리즘 기술 ","JavaScript Traversal 알고리즘 및 기술의 요약 "및"JavaScript 수학 작업 사용의 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.