search
HomeWeb Front-endJS TutorialIFrame cross-domain highly adaptive implementation code_javascript skills

复制代码 代码如下:

var iframeids = ['memberIndexIframe','inquiryCenterIframe','everychinaBbsIframe'];
var iframehide = "yes";
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 = "block";
}
}
}
if (window.addEventListener)
window.addEventListener("load", dynIframeSize, false)
else if (window.attachEvent)
window.attachEvent("onload", dynIframeSize)
else {
window.onload = dynIframeSize;
}

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

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

下面这个代码是跨域的iframe高度

项目网站中需要嵌入合作网站的页面,这就需要页面的自适应高度变化,并且是跨域的。在网上看了许多资料,加上自己的实践,终于实现了跨域的IFrame自适应高度。如下:

首先,我的页面a.html需要引入对方的b.html,在这里运用iframe方式实现页面的套用
a.html页面的主要代码如下:
复制代码 代码如下:





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



最后,对方的页面(b.html),让对方在b.html中加入以下javascript代码
复制代码 代码如下:




Compare the height of the visible area of ​​the webpage and the height of the full text of the webpage through Math.max(clientHeight,scrollHeight) to get the larger value,
iframe passes this height to my agent.html through src , so that the Iframe in a.html can adapt to the height of the other party's b.html. There is no problem when tested under IE, but other browsers have not been tested.
In the process of implementing this function, I found a very useful js for getting the page height on the Internet, which is also recorded and quoted here:
Copy code The code is as follows:

<script> <BR>var strInfo=" "; <BR>strInfo=" rnVisible area width of web page:" document.body .clientWidth; <BR>strInfo =" rnThe height of the visible area of ​​the web page: " document.body.clientHeight; <BR>strInfo =" The width of the visible area of ​​rn the web page: " document.body.offsetWidth " (including the width of the edge)" ; <BR>strInfo =" rnThe height of the visible area of ​​the web page: " document.body.offsetHeight " (including the width of the edge)" ; <BR>strInfo =" rnThe width of the full text of the web page: " document.body.scrollWidth; <BR>strInfo = " rnHeight of the full text of the webpage:" document.body.scrollHeight; <BR>strInfo =" rnThe height of the webpage being scrolled:" document.body.scrollTop; <BR>strInfo =" rnThe left side of the webpage being scrolled:" document.body.scrollLeft; <BR>strInfo =" rnThe main body of the web page:" window.screenTop; <BR>strInfo =" rnThe main body of the web page:" window.screenLeft; <BR>strInfo =" rnScreen resolution The height: " window.screen.height; <BR>strInfo =" rnThe width of the screen resolution: " window.screen.width; <BR>strInfo =" rnThe height of the available work area of ​​the screen: " window.screen.availHeight; <BR>strInfo =" rnScreen available workspace width:" window.screen.availWidth; <BR>window.confirm(strInfo); <BR></script>
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact 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单位,来实现自适应文字宽度的方法。除了理论解说,我们还会提供具体

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)来运行自己的代码。不过,这些服务器的缺点

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

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

如何通过Css Flex 弹性布局实现左右侧边栏的自适应如何通过Css Flex 弹性布局实现左右侧边栏的自适应Sep 26, 2023 am 10:57 AM

如何通过CssFlex弹性布局实现左右侧边栏的自适应导语:随着网页设计的不断发展,实现页面的自适应布局成为了一个重要的需求。而CssFlex弹性布局正是用来解决这个问题的一种很好的方式。本文将介绍如何通过CssFlex弹性布局来实现左右侧边栏的自适应布局,并给出详细的代码示例。一、Flex布局简介1.1弹性容器与弹性项目Flex布局通过将

使用PHP实现自适应网站设计使用PHP实现自适应网站设计Jun 22, 2023 pm 05:50 PM

网站设计在当前的互联网时代变得越来越重要。设计师和开发人员必须要考虑到不同设备的分辨率、不同尺寸屏幕以及不同的操作系统等问题。而这些变数让网站自适应变得更加必要。PHP是一种流行的编程语言,可以用来开发自适应网站。在本文中,我们将介绍使用PHP实现自适应网站设计的方法,并提供几个实用的技巧。什么是自适应网站设计?自适应网站设计是指根据用户设备(如手机、平板电

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools