웹 프론트엔드 JS 튜토리얼 IFrame 교차 도메인 적응력이 뛰어난 구현 code_javascript 기술

IFrame 교차 도메인 적응력이 뛰어난 구현 code_javascript 기술

May 16, 2016 pm 05:50 PM
적응형

复제대码 代码如下:

var iframeids = ['memberIndexIframe','inquiryCenterIframe','everychinaBbsIframe' ];
var iframehide = "예";
function dynIframeSize(){
var dyniframe = [];
for(var i=0;iif(!document.getElementById) return false;
dyniframe[i] = document.getElementById(iframeids[i]);
if(dyniframe[i] && !window.opera){
dyniframe[i].style.display = "block";
if(dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight){
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
}else if(dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight){
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}
if((document.all || document.getElement) && iframeids == "no") {
var tempobj = document.all?document.all[iframeids[i] ] : document.getElementById(iframeids[i]);
tempobj.style.display = "차단";
}
}
}
if (window.addEventListener)
window.addEventListener("load", dynIframeSize, false)
else if (window.attachEvent)
window .attachEvent("onload", dynIframeSize)
else {
window.onload = dynIframeSize;
}

对于上面的代码直接保存一个文件iframe.js,然后引用即可

注意: 这段代码对于跨域的iframe引用不太适用,需要特别别义其iframe 높이

下side这个代码是跨域的iframe 높이
项目网站中需要嵌入join网站的页면,这就需要页면적 자동 높은 품질의 IFrame이 자체적으로 높은 수준을 제공합니다.

저희는 다음과 같습니다.页면a.html需要引入对方的b.html, 에서 iframe 方式实现页면적 사용
a.html页면적主要代码如下:

复代码码 代码如下:




a.html页면只是用来引入对方页face的一个简单页face 这就不多做介绍。
然后,最好在a.html同一级目录下,创建一个에이전트. html页면, 该页면용 来得到对方通过js传递过来的参数,
根据高島参数来调整a.html中的a_iframe的高titude,主要代码如下:
Js代码

复主代码 代码如下:


最后,对方的页면(b.html),让对方재b.html中加入以下javascript代码

复代代码 代码如下:




Math.max(clientHeight,scrollHeight)를 통해 웹페이지의 가시 영역 높이와 웹페이지 전체 텍스트의 높이를 비교하여 더 큰 값을 얻으며,
iframe은 이 높이를 내 에이전트에 전달합니다. .html부터 src까지, a.html의 Iframe이 상대방의 b.html 높이에 맞춰질 수 있도록 합니다. IE에서는 테스트 시 문제가 없으나, 다른 브라우저에서는 테스트를 해보지 않았습니다.
이 기능을 구현하는 과정에서 인터넷에서 페이지 높이를 가져오는 데 매우 유용한 js를 발견했습니다. 여기에도 기록되고 인용되어 있습니다.
복사 code 코드는 다음과 같습니다.

<script> <br>var strInfo=" " <br>strInfo=" rn웹 페이지의 표시 영역 너비 :" document.body .clientWidth; <br>strInfo =" rn웹페이지의 표시 영역 높이: " document.body.clientHeight; <br>strInfo ="rn의 표시 영역 너비 웹 페이지: " document.body.offsetWidth " (가장자리 너비 포함)" ; <br>strInfo =" rn웹 페이지의 가시 영역 높이: " document.body.offsetHeight "(가장자리 너비 포함) width of the edge)" ; <br>strInfo =" rn웹페이지 전체 텍스트의 너비: " document.body.scrollWidth; <br>strInfo = " rn웹페이지 전체 텍스트의 높이:" document.body .scrollHeight; <br>strInfo =" rn스크롤되는 웹페이지의 높이:" document.body.scrollTop; <br>strInfo =" rn스크롤되는 웹페이지의 왼쪽:" document.body.scrollLeft; =" rn웹페이지 본문:" window.screenTop; <br>strInfo =" rn웹페이지 본문:" window.screenLeft; <br>strInfo =" rn화면 해상도 높이: " window.screen. height; <br>strInfo =" rn화면 해상도의 너비: " window.screen.width; <br>strInfo =" rn화면의 사용 가능한 작업 영역 높이: " window.screen.availHeight; >strInfo =" rn화면 사용 가능한 작업 공간 너비:" window.screen.availWidth <br>window.confirm(strInfo) <br></script>
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Windows 11에서 콘텐츠 적응형 밝기를 구성하는 방법 Windows 11에서 콘텐츠 적응형 밝기를 구성하는 방법 Apr 14, 2023 pm 12:37 PM

적응형 밝기는 표시되는 콘텐츠나 조명 조건에 따라 화면의 밝기 수준을 조정하는 Windows 11 컴퓨터의 기능입니다. 일부 사용자는 여전히 Windows 11의 새로운 인터페이스에 익숙해지고 있기 때문에 적응형 밝기를 쉽게 찾을 수 없으며 일부 사용자는 적응형 밝기 기능이 Windows 11에 없다고 말하기도 하므로 이 튜토리얼에서는 모든 문제를 해결합니다. 예를 들어 YouTube 동영상을 시청할 때 동영상에 갑자기 어두운 장면이 표시되는 경우 적응형 밝기가 화면을 더 밝게 만들고 대비 수준을 높입니다. 이는 컴퓨터, 스마트폰 또는 장치가 주변 조명에 따라 밝기 수준을 조정할 수 있는 화면 설정인 자동 밝기와 다릅니다. 전면 카메라에 특별한 것이 있습니다

Vue로 적응형 모바일 인터페이스를 구축하는 방법은 무엇입니까? Vue로 적응형 모바일 인터페이스를 구축하는 방법은 무엇입니까? Jun 27, 2023 am 11:05 AM

모바일 인터넷의 인기로 인해 점점 더 많은 웹사이트와 애플리케이션에서 모바일 경험을 고려해야 합니다. 널리 사용되는 프런트엔드 프레임워크인 Vue는 반응형 레이아웃과 적응형 기능을 갖추고 있어 적응형 모바일 인터페이스를 구축하는 데 도움이 될 수 있습니다. 이 기사에서는 Vue를 사용하여 적응형 모바일 인터페이스를 구축하는 방법을 소개합니다. px 대신 rem을 단위로 사용하고 모바일 인터페이스에서 px를 단위로 사용하면 여러 장치에서 표시 효과가 일관되지 않을 수 있습니다. 따라서 단위는 px 대신 rem을 사용하는 것이 좋습니다. 렘은 상대적이다

CSS 뷰포트 단위 vmin 및 vw를 사용하여 적응형 이미지 크기를 구현하는 방법 CSS 뷰포트 단위 vmin 및 vw를 사용하여 적응형 이미지 크기를 구현하는 방법 Sep 13, 2023 am 08:18 AM

적응형 이미지 크기를 구현하기 위해 CSSViewport 단위 vmin 및 vw를 사용하는 방법 웹 디자인에서는 이미지가 화면 크기에 적응해야 하는 상황에 자주 직면합니다. 이 목표를 달성하기 위해 CSS는 강력한 단위인 뷰포트 단위를 제공합니다. 그 중 vmin은 뷰포트 너비의 작은 쪽의 백분율을 나타내고, vw는 뷰포트 너비의 백분율을 나타냅니다. 따라서 이 두 단위를 사용하여 적응형 이미지 크기의 효과를 얻을 수 있습니다. 구체적인 내용은 아래에서 소개하겠습니다

CSS 뷰포트: vmax 및 vw를 사용하여 적응형 텍스트 너비를 구현하는 방법 CSS 뷰포트: vmax 및 vw를 사용하여 적응형 텍스트 너비를 구현하는 방법 Sep 13, 2023 am 10:16 AM

CSSViewport: vmax 및 vw를 사용하여 적응형 텍스트 너비를 구현하는 방법 모바일 장치의 인기로 인해 반응형 디자인은 웹 디자인에서 중요한 개념이 되었습니다. 그 중에서도 다양한 화면 크기에서도 일관된 디스플레이 효과를 유지하기 위한 적응형 텍스트 너비가 중요한 기술입니다. 이 기사에서는 CSSViewport 단위, 특히 vmax 및 vw 단위를 사용하여 적응형 텍스트 너비를 구현하는 방법을 소개합니다. 이론적인 설명 외에 구체적인 설명도 해드립니다.

PHP8.0의 적응형 서버 PHP8.0의 적응형 서버 May 14, 2023 pm 01:10 PM

2020년 11월 26일, PHP 팀은 공식적으로 PHP 8.0 버전을 출시했습니다. 이전 버전과 비교하여 PHP 8.0은 주목할 만한 기능 중 하나가 적응형 서버입니다. 이 기사에서는 PHP8.0의 적응형 서버 개념과 장점을 소개합니다. 이전 PHP 버전에서는 개발자가 PHP 자체 서버(예: PHP-FPM, Apache)를 사용하여 자체 코드를 실행할 수 있었습니다. 하지만 이러한 서버의 단점은

vue는 적응형이 될 수 있나요? vue는 적응형이 될 수 있나요? Dec 30, 2022 pm 03:25 PM

Vue는 자체 적응을 달성하는 방법은 다음과 같습니다. 1. "npm install" 또는 "yarn add" 명령을 통해 "scale-box" 구성 요소를 설치하고 "scale-box"를 사용하여 적응형 스케일링을 달성합니다. 2. 자체 적응을 달성하기 위해 장치 픽셀 비율 설정을 통해 3. JS를 통해 줌 속성을 설정하여 자체 적응을 달성합니다.

CSS Flex 레이아웃을 통해 적응형 그리드를 구현하는 방법 CSS Flex 레이아웃을 통해 적응형 그리드를 구현하는 방법 Sep 26, 2023 pm 12:45 PM

CSSFlex 탄력적 레이아웃을 통해 적응형 그리드를 구현하는 방법 소개: 웹 디자인에서 그리드 레이아웃은 웹 페이지를 균일한 그리드로 분할할 수 있으며 다양한 크기의 화면에 적응할 수 있습니다. CSSFlex 탄력적 레이아웃은 적응형 그리드 레이아웃을 구현하는 간단하고 강력한 방법을 제공합니다. 이 기사에서는 CSSFlex 탄력적 레이아웃을 사용하여 적응형 그리드를 생성하는 방법을 소개하고 특정 코드 예제를 제공합니다. 1. 기본 단계: HTML 만들기

CSS Flex 레이아웃을 통해 적응형 왼쪽 및 오른쪽 사이드바를 구현하는 방법 CSS Flex 레이아웃을 통해 적응형 왼쪽 및 오른쪽 사이드바를 구현하는 방법 Sep 26, 2023 am 10:57 AM

CssFlex 탄력적 레이아웃을 통해 왼쪽 및 오른쪽 사이드바에 대한 적응형 광고문을 구현하는 방법: 웹 디자인의 지속적인 개발로 인해 페이지의 적응형 레이아웃을 구현하는 것이 중요한 요구 사항이 되었습니다. CSSFlex 탄력적 레이아웃은 이 문제를 해결하는 좋은 방법입니다. 이 글에서는 CssFlex 탄력적 레이아웃을 통해 왼쪽 및 오른쪽 사이드바의 적응형 레이아웃을 구현하는 방법을 소개하고 자세한 코드 예제를 제공합니다. 1. Flex 레이아웃 소개 1.1 유연한 컨테이너 및 유연한 프로젝트 Flex 레이아웃은

See all articles