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

复제대码 代码如下:

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으로 문의하세요.
如何在 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构建自适应移动端界面。使用rem代替px作为单位在移动端界面中使用px作为单位,可能会导致在不同设备上的显示效果不一致。因此,建议使用rem代替px作为单位。rem是相对

使用 CSS Viewport 单位 vmin 和 vw 实现自适应图片大小的方法使用 CSS Viewport 单位 vmin 和 vw 实现自适应图片大小的方法Sep 13, 2023 am 08:18 AM

使用CSSViewport单位vmin和vw实现自适应图片大小的方法在网页设计中,经常会遇到需要让图片自适应屏幕大小的情况。为了实现这一目标,CSS提供了一种强大的单位——viewport单位。其中,vmin表示视口宽高中较小的一方的百分比,而vw表示视口宽度的百分比。所以,我们可以利用这两种单位来实现自适应图片大小的效果。下面将介绍具体

CSS Viewport: 如何使用 vmax 和 vw 来实现自适应文字宽度的方法CSS Viewport: 如何使用 vmax 和 vw 来实现自适应文字宽度的方法Sep 13, 2023 am 10:16 AM

CSSViewport:如何使用vmax和vw来实现自适应文字宽度的方法随着移动设备的普及,响应式设计已经成为了网页设计的重要概念。其中,自适应文字宽度在不同屏幕尺寸下保持一致的显示效果是一项重要的技术。本文将介绍如何使用CSSViewport单位,特别是vmax和vw单位,来实现自适应文字宽度的方法。除了理论解说,我们还会提供具体

vue能实现自适应吗vue能实现自适应吗Dec 30, 2022 pm 03:25 PM

vue能实现自适应,其实现自适应的方法有:1、通过“npm install”或“yarn add”命令安装“scale-box”组件,并使用“scale-box”实现适配缩放;2、通过设置设备像素比例实现自适应;3、通过JS设置zoom属性调整缩放比例来实现自适应即可。

PHP8.0中的自适应ServerPHP8.0中的自适应ServerMay 14, 2023 pm 01:10 PM

在2020年11月26日,PHP团队正式发布了PHP8.0版本,相较于之前的版本,PHP8.0带来了许多新的特性和改进,其中一个值得关注的特点是自适应Server。本文将会介绍PHP8.0中自适应Server的概念以及它的优势。在之前的PHP版本中,开发者可以使用PHP自带的服务器(比如说PHP-FPM、Apache)来运行自己的代码。不过,这些服务器的缺点

如何使用HTML、CSS和jQuery创建一个自适应的网站布局如何使用HTML、CSS和jQuery创建一个自适应的网站布局Oct 27, 2023 am 11:06 AM

如何使用HTML、CSS和jQuery创建一个自适应的网站布局在当今互联网时代,网站的自适应布局已经成为了一个必不可少的要求。网站的自适应布局可以使网站在不同设备上展示出良好的用户体验,并且适应不同屏幕尺寸的设备,如电脑、平板和手机等。本文将介绍如何使用HTML、CSS和jQuery来创建一个自适应的网站布局,并提供具体的代码示例。使用HTML创建网站骨架首

如何通过Css Flex 弹性布局实现自适应网格如何通过Css Flex 弹性布局实现自适应网格Sep 26, 2023 pm 12:45 PM

如何通过CSSFlex弹性布局实现自适应网格引言:在网页设计中,网格布局是一种非常常用的布局方式,它可以使网页分为均匀的网格,并可以在不同大小的屏幕上自适应调整。而CSSFlex弹性布局提供了一种简单而强大的方式来实现自适应网格布局。本文将介绍如何使用CSSFlex弹性布局来创建自适应网格,并提供具体的代码示例。一、基本步骤:创建HTML

See all articles

핫 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를 무료로 생성하십시오.

뜨거운 도구

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.