iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >HTML中怎么设置Iframe自适应高度
  • 149
分享到

HTML中怎么设置Iframe自适应高度

2024-04-02 19:04:59 149人浏览 泡泡鱼
摘要

这篇“html中怎么设置Iframe自适应高度”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇

这篇“html中怎么设置Iframe自适应高度”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“HTML中怎么设置Iframe自适应高度”文章吧。

主要是以下js函数: 

一、程序代码

  function SetWinHeight(obj)

  {

  var win=obj;

  if (document.getElementById)

  {

  if (win && !window.opera)

  {

  if (win.contentDocument && win.contentDocument.body.offsetHeight)

  win.height = win.contentDocument.body.offsetHeight;

  else if(win.Document && win.Document.body.scrollHeight)

  win.height = win.Document.body.scrollHeight;

  }

  }

  }

最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配;

二、程序代码:

我们看看另一种情况的iframe解决方案

重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的)现在给大家分享一下:

1、建立一个bottom.js的文件,然后输入下面的代码;

parent.document.all("框架ID名").style.height=document.body.scrollHeight;

parent.document.all("框架ID名").style.width=document.body.scrollWidth;

2、给你网站里所有的被包含文件里面每个都加入,在WINXP、IE6下面测试通过;

实现 iframe 的自适应高度

    实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象;

程序代码

<script type="text/javascript">

//

//输入你希望根据页面高度自动调整高度的iframe的名称的列表

//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。

//定义iframe的ID

var iframeids=["test"]

//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏

var iframehide="yes"

function dyniframesize()

{

var dyniframe=new Array()

for (i=0; i<iframeids.length; i++)

{

if (document.getElementById)

{

//自动调整iframe高度

dyniframe[dyniframe.length] = document.getElementById(iframeids);

if (dyniframe && !window.opera)

{

dyniframe.style.display="block"

if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape

dyniframe.height = dyniframe.contentDocument.body.offsetHeight;

else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE

dyniframe.height = dyniframe.Document.body.scrollHeight;

}

}

//根据设定的参数来处理不支持iframe的浏览器的显示问题

if ((document.all || document.getElementById) && iframehide=="no")

{

var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)

tempobj.style.display="block"

}

}

}

if (window.addEventListener)

window.addEventListener("load", dyniframesize, false)

else if (window.attachEvent)

window.attachEvent("onload", dyniframesize)

else

window.onload=dyniframesize

</script>

以上就是关于“HTML中怎么设置Iframe自适应高度”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网html频道。

--结束END--

本文标题: HTML中怎么设置Iframe自适应高度

本文链接: https://www.lsjlt.com/news/90702.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • HTML中怎么设置Iframe自适应高度
    这篇“HTML中怎么设置Iframe自适应高度”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇...
    99+
    2024-04-02
  • Iframe如何自适应高度
    这篇文章主要介绍了Iframe如何自适应高度,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在构建B/S系统界面的时候,经常会遇到主页面index.html中嵌套其他页面的情况...
    99+
    2023-06-08
  • iframe窗口高度自适应怎么实现
    要实现iframe窗口的高度自适应,可以使用以下方法:1. 使用JavaScript动态调整iframe的高度。在iframe的内容...
    99+
    2023-08-11
    iframe
  • iframe怎么根据内容自适应高度
    要根据内容自适应iframe的高度,可以使用以下方法:1. 使用JavaScript动态调整iframe的高度。- 在父页面中,使用...
    99+
    2023-10-18
    iframe
  • 使用postMessage怎么实现iframe自适应高度
    这篇文章将为大家详细讲解有关使用postMessage怎么实现iframe自适应高度,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。index.html :<!DOCTYPE ...
    99+
    2023-06-09
  • css怎么设置div自适应高度
    这篇文章主要介绍“css怎么设置div自适应高度”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css怎么设置div自适应高度”文章能帮助大家解决问题。一、一定最小高...
    99+
    2024-04-02
  • js如何控制Iframe高度自适应
    今天小编给大家分享一下js如何控制Iframe高度自适应的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来...
    99+
    2024-04-02
  • CSS怎么让iframe实现自适应高度的效果
    小编给大家分享一下CSS怎么让iframe实现自适应高度的效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!   iframe自适应高度   出于演示目的,本文将使用视频嵌入我们的if...
    99+
    2024-04-02
  • JavaScript怎么设置Iframe高度
    这篇“JavaScript怎么设置Iframe高度”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看...
    99+
    2024-04-02
  • DIV height与DIV自适应高度怎么设置
    今天小编给大家分享一下DIV height与DIV自适应高度怎么设置的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下...
    99+
    2024-04-02
  • 网页设计中如何解决iframe自适应高度的问题
    小编给大家分享一下网页设计中如何解决iframe自适应高度的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!可能有人还没接触到这个问题过,先说明一下,什么是自适...
    99+
    2023-06-08
  • iframe窗口高度自适应的实现方法
    要实现iframe窗口高度自适应,可以通过以下方法:1. 使用JavaScript动态调整iframe的高度:- 在iframe加载...
    99+
    2023-08-11
    iframe
  • html如何设置input的宽度自适应
    这篇文章主要讲解了“html如何设置input的宽度自适应”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html如何设置input的宽度自适应”吧! ...
    99+
    2024-04-02
  • css textarea高度自适应无滚动条怎么设置
    要实现textarea高度自适应且无滚动条,可以通过以下CSS样式设置:```csstextarea {resize: none; ...
    99+
    2023-09-20
    css
  • css中设置元素高度自适应的方法
    这篇文章主要介绍css中设置元素高度自适应的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一...
    99+
    2023-06-14
  • iframe实现高度自适应小程序web-view方案
    目录前言关于 contentWindow, contentDocument定义和用法解决方案前言 最近在项目开发中,遇到一种场景:H5的页面展示的有服务端返回的页面展示,所以考虑的i...
    99+
    2023-01-11
    iframe高度自适应web-view iframe自适应web-view
  • css怎么让高度自适应
    这篇文章主要介绍了css怎么让高度自适应,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 css让高度自适应的方法...
    99+
    2024-04-02
  • Java中怎么设置Excel自适应行高、列宽
    这期内容当中小编将会给大家带来有关Java中怎么设置Excel自适应行高、列宽,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。在excel中,可通过设置自适应行高或列宽自动排版,是一种比较常用的快速调整表格...
    99+
    2023-06-02
  • iframe 根据内容自适应高度-终极解决方案
    要使iframe根据内容自适应高度,可以使用以下终极解决方案:1. 首先,在iframe的父容器中添加一个用于容纳iframe的di...
    99+
    2023-10-12
    iframe
  • css如何设置单元格的高度宽度自适应
    这篇文章给大家分享的是有关css如何设置单元格的高度宽度自适应的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 设置单元格的高度宽度自适应的方法:1、给...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作