js 도메인 간 문제 도메인 간 iframe 적응형 크기 구현 code_javascript 기술

코드 복사 코드는 다음과 같습니다.

<script> <br>function setHeight(){ <br>var dHeight = document.documentElement.scrollHeight; <br>var t = document.createElement("div"); <br>t. innerHTML = ' <iframe id="kxiframeagent" src="http://rest.kaixin001.com/api/agent.html#' dHeight '"scrolling="yes" height="0px" width="0px"&gt ;< /iframe>'; <br>document.documentElement.appendChild(t.firstChild) <br>} <br></script>

나중에 인터넷에서 검색하다가 갑자기

을 깨달았습니다. 다음과 같이 복사했는데 모두가 구현 아이디어를 이해하는 데 집중했습니다.


질문 :

도메인 A의 페이지 a.htm은 iframe을 통해 도메인 B의 페이지 b.html에 삽입됩니다. b.html의 크기는 예측할 수 없고 변경되므로 iframe은 적응형입니다. a.htm의 크기가 필요합니다.

문제의 본질:

JS 교차 도메인 문제. a.htm의 경우 먼저 b.html의 크기를 읽어야 하며 A와 B는 동일한 도메인에 속하지 않습니다. js의 액세스가 제한되어 b.html의 크기를 읽을 수 없습니다. 🎜>해결책:

우선 전제는 A, B는 협력관계, b.html은 A가 제공하는 js를 소개할 수 있다
먼저 a.html은 소개한다 iframe을 통한 b.html

코드 복사 코드는 다음과 같습니다. < ;iframe id="aIframe" height="0" width="0" src="http:// www.b.com/html/b.html"frameborder="no" border="0px" marginwidth="0 " marginheight="0" scrolling="no"allowtransparency="yes" >

B는 A가 제공하는 js 파일을 b.html에 소개했습니다

Html 코드

코드 복사 코드는 다음과 같습니다.

js는 먼저 b .html 너비와 높이를 읽은 다음 iframe을 생성합니다. src는 동일한 도메인에 있는 중간 프록시 페이지 a_proxy.html입니다. A, src

Html 코드

코드 복사의 해시에 읽기 너비와 높이를 설정합니다. 코드는 다음과 같습니다. 다음과 같습니다:

a_proxy.html은 도메인 A 아래에 제공되는 좋은 중간 프록시 페이지입니다. 너비와 높이 값을 읽는 역할을 담당합니다. ​​​​location.hash에서 동일한 도메인 아래의 a.html에서 iframe의 너비와 높이를 설정합니다.

코드 복사

코드는 다음과 같습니다. var pParentFrame = parent.parent.document.getElementById("aIframe") var locationUrlHash = parent .parent.frames["aIframe"].frames["iframeProxy"].location.hash; pParentFrame.style.width = locationUrlHash.split("#")[1].split("|")[0 ] "px";

pParentFrame.style.height = locationUrlHash.split("#")[1].split("|") [1] "px"

var pParentFrame = parent.parent.document .getElementById("aIframe");
var locationUrlHash = parent.parent.frames["aIframe"].frames["iframeProxy"].
pParentFrame.style.width = locationUrlHash.split(" #")[1].split("|")[0] "px";
pParentFrame.style.height = locationUrlHash.split ("#")[1].split("|")[1] "px";


이 경우 a.html의 iframe은 b.html의 너비와 높이에 맞춰집니다.

다른 유사한 js 교차 도메인 작업 문제가 발생할 수 있습니다. 또한 이 아이디어에 따라 해결됩니다.