Iframe Windows의 높이 적응성을 실현하는 또 다른 영리한 아이디어

저자：Eve Cole 업데이트 시간：2025-02-23 11:32:01

domaina에는 page index.html이 있습니다.

다른.html 페이지가 iframe에 표시되고 페이지 컨텐츠가 동적으로 증가하거나 감소하므로 iframe의 스크롤바를 지금 제거해야합니다.

JavaScript 동일한 오리핀 정책의 한계로 인해 크로스 도메인 운영을 수행 할 수 없으므로 문제가 더 어려워집니다.

온라인 실습을 언급하고 Domaina에 속하는 에이전트 페이지 또는 에이전트 .html을 소개했습니다.

그런 다음 도메인의 다른.html에서 iframe을 사용하여 Nest Agent.html을 사용하십시오.

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

index.html iframe을 사용하여 Other.html Nesting Other.html

기타 .htmlnest agent.html iframe을 사용합니다

세 번째 페이지 Agent.html이 "동일한 오리핀 정책"의 규칙을 준수하고 다른 도메인에서 매개 변수의 통과를 완료하는 이유!

우리의 궁극적 인 목표는 스크롤 바를 제거하고 모든 임베디드 페이지 컨텐츠가 표시되는지 확인하는 것입니다.

1. 다른 age.html 페이지의 실제 높이를 가져옵니다

2. Iframe의 SRC 속성으로 높이를 설정합니다.

3. agent.html에서 iframe의 SRC 속성에서 높이 값을 잘라냅니다.

다음 예에서는 Trick이 SetInterval ()을 사용하여 Iframe의 높이를 지속적으로 설정하지 않도록 사용됩니다.

이 방법은 타임 스탬프를 iframe의 SRC에 연결하여 브라우저가 매번 Agent.html을 다시로드하도록하는 것입니다.

그런 다음 agent.hml의 js 함수를 intokemethodintopwindow ()를 실행하도록하십시오.

도메인에서 2 HTML

index.html

코드 사본은 다음과 같습니다.

#{Extends 'main.html' /}

#{제목 세트 : 'home' /}

<HR>

<div style = "color : red; font-weight : bold"> 창 적응-상 동성 정책의 한계와 동시에 상동 정책을 사용하여 iframe의 스크롤 바를 제거하고 창의 높이를 동적으로 조정합니다. , 중첩 된 페이지의 모든 내용을 표시 할 수 있도록 </div>

<!-동적 높이 조정이 필요한 iframe->

</div>

기능 크기 조정 (높이) {

// alert ( "resize");

document.getElementsByName ( "domainb") [0] .height = height;

}

</스크립트>

Agent.html

코드 사본은 다음과 같습니다.

<! doctype html>

<html>

<헤드>

<title> 제목을 여기에 삽입하십시오 </title>

</head>

<body>

나는 프록시 페이지입니다!

Window.onload = invokemethodintopwindow;

함수 invokemethodintopWindow () {

// ALERT ( "동일한 도메인에서 함수를 호출하고 iframe의 높이를 재설정하십시오");

var domaina = document.parentwindow;

var realHeight = domaina.location.hash.split ( "#") [1];

// 마지막 단계 : Iframe의 높이를 재설정하려면 가장 위 창의 기능을 호출합니다.

parent.parent.resize (RealHeight);

// ALERT ( "RealHeight :"+RealHeight);

//alert(document.parentwindow.name) ;// 컨테이너가 위치한 창 이름의 이름

//error://alert(document.parentWindow.name);

//alert(document.parentwindow.parent.name.name.name) ;////// The Top Level Window는 Domaina에 속하므로 액세스 할 수 있습니다.

}

// 타임 스탬프가 다른 iframe의 SRC 속성을 설정 한 후 setInterval ()을 사용할 필요가 없습니다.

// setInterVal ( "invokemethodintopWindow ()", 100);

</스크립트>

</body>

</html>

도메인의 기타 .html

코드 사본은 다음과 같습니다.

<! doctype html>

<html>

<헤드>

<title> 제목을 여기에 삽입하십시오 </title>

</head>

<!-도메인 a->에 포함 된 페이지

<버튼 유형 = "버튼"onclick = "btnclick ()"> 스위치 디스플레이 </button>

JavaScript에는 "동일한 오리핀 정책"이라는 매우 중요한 보안 제한이 있습니다.

이 전략은 JavaScript 코드에 액세스 할 수있는 페이지 컨텐츠에 중요한 제한 사항을 제시합니다. 즉, JavaScript는 포함 된 문서와 동일한 도메인에서만 콘텐츠에 액세스 할 수 있습니다.