> 웹 프론트엔드 > JS 튜토리얼 > iframe 창 높이 적응_자바스크립트 기술을 위한 또 다른 독창적인 구현 아이디어

iframe 창 높이 적응_자바스크립트 기술을 위한 또 다른 독창적인 구현 아이디어

WBOY
풀어 주다: 2016-05-16 16:53:25
원래의
1529명이 탐색했습니다.

domainA에는 index.html 페이지가 있고 domainB에는 other.html 페이지가 iframe을 통해 중첩되어 있습니다.
other.html 페이지는 iframe에 표시되고 페이지 콘텐츠가 동적으로 늘어나거나 줄어들므로 이제 iframe을 제거해야 합니다. 스크롤바
자바스크립트 동일 출처 정책의 제한으로 인해 도메인 간 작업을 수행할 수 없어 문제가 더 어려워집니다
온라인 실습, 에이전트 페이지를 참고하면, 또는 domainA에 속하는 중개 에이전트.html이 도입됩니다.
그런 다음 domainB의 other.html에서 iframe을 사용하여 Agent.html을 중첩합니다.

자, 이제 상황은 다음과 같습니다.

index.html iframe을 사용하여 Nest other.html 삽입
other.html iframe을 사용하여 Agent.html 중첩
세 번째 페이지인 Agent.html이 도입된 이유는 다음의 규칙을 준수하기 위한 것입니다. "동일 출처 정책"을 적용하고 다른 도메인에서 매개변수 이전을 완료하세요!

우리의 궁극적인 목표는 스크롤 막대를 제거하고 포함된 모든 페이지 콘텐츠가 표시되도록 하는 것입니다.
1. other.html 페이지의 실제 높이를 가져옵니다.
2. 높이를 On으로 설정합니다. 내장된 iframe의 src 속성
3. agent.html에서 iframe의 src 속성에서 높이 값을 가로채기

다음 예에서는 setInterval( ) 사용을 피하기 위해 트릭을 사용합니다. iframe의 높이
이 방법은 iframe의 src에 타임스탬프를 첨부하여 브라우저가 매번 agent.html을 다시 로드하도록 하는 것입니다.
그런 다음 Agent.hml의 js 함수인okeMethodInTopWindow()가 Execute 2 html을 얻도록 합니다. in
domainA

index.html

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

#{extends 'main.html' /}
#{set title:'Home' /}




창 적응---동일 출처 정책의 제한을 우회하는 동시에 동일 출처 정책을 사용하여 iframe의 스크롤 막대를 제거하고 중첩된 페이지의 모든 콘텐츠를 표시할 수 있는 창의 높이

align:center;">



🎜>



관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿