iframe 창 높이 적응 구현 방법

저자：Eve Cole 업데이트 시간：2025-02-22 14:16:01

domaina index.html에 페이지가 있습니다.

다른.html 페이지가 iframe에 표시되고 페이지의 내용이 동적으로 증가하거나 감소하기 때문에 이제 iframe 롤링 바를 제거해야합니다.

JavaScript 상 동성 전략의 한계로 인해 크로스 -도메인 작업을 수행 할 수 없으므로 문제가 더욱 어려워집니다.

인터넷 접근법을 참조하고, 대행사 페이지 또는 Domaina에 속하는 Agent.html을 소개합니다.

그런 다음, 다른 .html에서 domainb에서 iframe을 사용하여 중첩 Agent.html을 사용하십시오.

좋아, 지금은 다음과 같다 :

index.html은 iframe Nested Other.html을 사용합니다

Other.html은 iframe nesting agent.html을 사용합니다

3 페이지 에이전트를 소개하는 이유는 "균질 전략"의 규칙을 준수하고 다른 도메인에서 매개 변수의 전송을 완료하기 때문입니다!

우리의 궁극적 인 목적은 롤링 바를 제거하고 임베디드 페이지의 모든 내용이 표시되도록하는 것입니다.

1. 다른 기타의 실제 고도의 실제 높이. html 페이지

2. Iframe의 SRC 속성에 대한 높이 설정 내장.

3. Agent.html에서 iframe의 SRC 속성에서 높이 값을 상호 작용합니다.

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

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

그런 다음 agent.hml invokemethodintopwindow ()의 JS 기능을 실행하십시오.

도메인에서 2 HTML

index.html

다음과 같이 코드 코드를 복사하십시오.

#{Extends 'main.html' /}

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

<HR>

<div style = "color : 빨간색; font-weight : bold"> 窗口自适应 --- 绕开同源策略的限制, 同时又利用同源策略, 去掉 iframe 的滚动条, 动态调整窗口的高度, 让중첩 된 페이지의 모든 내용을 표시 할 수 있습니다 </div>

<!-iframe->의 높이를 동적으로 조정해야합니다

</div>

기능 크기 조정 (높이) {

// alert ( "resize");

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

}

</스크립트>

Agent.html

다음과 같이 코드 코드를 복사하십시오.

<html>

<헤드>

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

</head>

<body>

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

Window.onload = invokemethodintopwindow;

함수 invokemethodintopwindow () {) {

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

var domain = 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.parent.name);

// alert (document.parentWindow.parent.parent.name); // 창의 상단 레이어는 도메인에 속하므로 방문 할 수 있습니다.

}

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

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

</스크립트>

</body>

</html>

도메인의 기타 .html

다음과 같이 코드 코드를 복사하십시오.

<html>

<헤드>

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

</head>

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

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

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

이 전략은 JavaScript 코드가 액세스 할 수있는 페이지의 내용에 대해 중요한 제한을 만들었습니다.