도메인 간 IFrame 요소의 계산된 스타일(예: 높이 및 너비)에 어떻게 액세스할 수 있나요?

계산된 스타일 교차 도메인 액세스

웹 개발에서는 교차 도메인 요소에서 계산된 스타일을 얻는 것이 어려울 수 있습니다. 이 경우 다른 도메인의 iframe 내 요소의 높이 및 너비 계산 스타일을 검색하는 것이 목표입니다.

접근 방법

여기에서 계산된 스타일에 액세스하려면 시나리오에서는 다음 접근 방식을 고려하십시오.

• window.getCompulatedStyle() WebKit 브라우저의 경우:

  1. WebKit 브라우저(예: Safari 및 Chrome)는 window.getCompulatedStyle() 메서드를 제공합니다.

  2. 다음과 같이 사용할 수 있습니다.

     window.getComputedStyle(document.getElementById("frameId"), null).getPropertyValue("height");

  3. 계산된 스타일 값을 반환합니다(예: "1196px").

• IE용 element.currentStyle:

  1. Internet Explorer는 element.currentStyle 속성을 사용하여 다음을 수행합니다. 계산된 스타일에 액세스하세요.

  2. 예 사용법:

     document.getElementById("frameId").currentStyle.height;

  3. element.currentStyle은 계산된 값이 아닌 요소에 명시적으로 설정된 스타일만 반영합니다.

• iFrame으로 이동 DOM:

  1. iframe 콘텐츠(예: HTML 요소)의 계산된 스타일에 액세스해야 하는 경우 iFrame의 DOM으로 이동할 수 있습니다.
  2. iframeObject 사용 .contentDocument.documentElement를 사용하면 iFrame 문서의 루트 요소에 액세스할 수 있습니다.
  3. 다음을 수행할 수 있습니다. 그런 다음 iframe DOM 내의 적절한 요소에 window.getCompulatedStyle() 또는 element.currentStyle을 적용합니다.

예

제공한 코드입니다. 다음은 다음을 사용하여 iframe 내에서 HTML 요소의 높이 계산 스타일을 검색하는 방법에 대한 예입니다. window.getCompulatedStyle():

window.getComputedStyle(document.getElementById("frameId").contentDocument.documentElement, null).getPropertyValue("height");

추가 참고 사항

• 요소 선택을 용이하게 하기 위해 iframe에 id 속성이 있는지 확인하세요.
• 스크린샷에 지정된 높이 및 너비 값은 픽셀 단위로 표시되지만 실제 크기에서 해당 단위를 확인하는 것이 중요합니다. 시나리오.

위 내용은 도메인 간 IFrame 요소의 계산된 스타일(예: 높이 및 너비)에 어떻게 액세스할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!