iframe 高度自适应 手机端适用

最新推荐文章于 2024-07-31 18:37:50 发布
最新推荐文章于 2024-07-31 18:37:50 发布
阅读量1.2w 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fiax23/article/details/25990741
版权

从优酷上复制的通用代码必须要填写高度跟宽度，想自适应的话就改为 width=100% height=100%

然后发现这样宽度是可以了 但是高度不行，然后去找度娘， js jq，或者改成 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">，试了半天没效果，然后想到一个折中的办法。

在css中设置该iframe的一个最小高度 min-height:400px

电脑端看上去 稍微小了些，但还是在接受范围内，手机端也在接受范围内。

(本文出自http://www.fiaw.net/?action=show&id=64，转载时请注明出处) 

fiax23
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WEB视频自适应（上）
itbrand的博客
09-28 1万+
有时需要在web页面中载入视频，我们会用到HTML5视频播放器代码，如下显示： <video width="320" height="240" controls="controls"> <source src="https://www.w3school.com.cn/i/movie.ogg" type="video/ogg"> <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4"&g
前端面试问题（适用于面试回答思路）
yaminne的博客
03-28 4946
原型和原型链 原型：构造函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型。也即，每个构造函数的实例都有一个原型，叫原型对象，由实例对象的内置属性_proto_指向。每个原型都有一个 constructor 属性指向关联的构造函数。 原型用法：构造函数创建的实例可以访问实例的属性和方法，也可以访问原型的属性和方法。对于原型只能访问自己的属性和方法。考虑这一特性，如果对象公有的属性和方法，我们可以添加到原型上面，对象需要的时候直接访问原型的属性和方法就可以。 当读取实
iframe自适应宽高
11-08
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域认证。 提供了一系列的页面大小的计算方法来支持复杂的CSS布局。 检测修改DOM可以使网页大小使用MutationObserver。 发现可以导致页面大小调整事件（窗口大小调整，CSS动画和过渡，改变方向和鼠标事件）。 简化通讯和主机之间通过PostMessage iframe的网页。 在iframe页面链接修复和支持iFrame与父页面之间的链接。 提供自定义的大小和滚动方法。 使家长地位和视口大小的iframe。 与ViewerJS支持PDF和ODF文档。 后备支持到IE8。
css iframe 手机自适应代码
curlmen的专栏
10-22 799
<div style="position:relative;overflow:hidden;padding-top:56.25%;margin:0 auto"> <iframe src="https://v.qq.com/txp/iframe/player.html?vid=y3302qj5dos" data-ke-src="https://v.qq.com/txp/iframe/player.html?vid=y3302qj5dos" width="90%" height="100..
iframe内嵌网页放大或缩小的处理方案
最新发布
yiguoxiaohai的博客
07-31 486
iframe内嵌网页放大或缩小的处理方案
解决iframe高度自适应
weixin_44111803的博客
03-21 7548
解决iframe高度自适应原因第一种方法第二种方法 原因 iframe的高度不会随着页面高度的变化而变化，可能会导致页面显示不全，或者页面下方有空白的问题。 第一种方法 这个方式更适用于嵌套的页面，当嵌套多个iframe时，比如左侧有个侧边栏，右侧是个大的iframe，这个大的iframe又嵌套了一层：中间是iframe，但是右侧又有个侧边栏，这时候不想让iframe单独滑动（避免页面出现两个滚动条），而是想整个页面一起滑动时，用这个方法。 html代码： 注意一定要写height=‘100%’ scrol
iframe高度宽度自适应
热门推荐
m0_38082271的博客
02-01 1万+
最近在项目中用到了iframe，写出来做个记录，能帮到大家最好。一.首先简单介绍一下iframe     iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。    所有浏览器都支持 &lt;iframe&gt; 标签。二.页面引用&lt;iframe src="index.html" id="myiframe" scrolling="no" frameborder="0" widt...
移动页面开发中使用iframe高度的问题
Andrew_SJ的博客
08-19 377
页面中已有内容，插入iframe，它的高度的计算方式： 使用js获取页面剩余高度，针对不同尺寸设备可以独立获取剩余高度，实现响应式。 使用flex布局的flex属性。 #main div { flex:1; } flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。 flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。 注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。 flex-grow 一个数字，规定项目将相
iframe自适应高度的简单解决办法
06-04
本篇将深入探讨如何实现`iframe`自适应高度的简单解决办法。 首先，我们需要了解`iframe`的基本结构。在HTML中，创建一个`iframe`标签如下： ```html <iframe src=...
144_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
这个"144_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip"压缩包文件包含的是一套完整的HTML5移动端前端模板，适用于创建手机和电脑的自适应网站。让我们深入探讨一下相关知识点。 1. **HTML5**...
前端常见面试题
DJxyyy的博客
09-27 452
前端常见面试题 1、 响应式布局如何实现 响应式布局可以让网站同时适配不同分辨率和不同的手机端，让客户有更好 的体验。方案一：百分比布局 利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素； 能够设置的属性有 width、height、padding、margin，其他属性比如 border、 font-size 不能用百分比设置的，先看一个简单例子： 顶部是利用设置图片 width: 50%来适应不同的分辨率，由于原始图片高度 不同，所以第一张图片顶部会有空白，这种情况最好两张图片宽高保持
iframe自动适应高度（完美自适应高度嵌套代码），兼容目前主流浏览器。
08-12
iframe自动适应高度，很难得的资源，很多下载的都是部分浏览器可以用，这个可以兼容360.ie6789等，遨游，火狐。搜狗等浏览器。。亲自测试。
IOS iframe 的高度会根据内容自适应
weixin_42606458的博客
08-10 2687
问题：在iOS上一个页面通过iframe嵌套一个页面，内容页面中一个显示在页面底部的元素显示不出来，这个元素的 position 为 fixed 。 原因：因为 iOS 下的 Safari 的 IFrame 的高度会根据页面的内容自适应造成了 IFrame 的高度过高（即iframe的高度&gt;屏幕的高度）。这个元素的 position 为 fixed显示在了屏幕外面，导致iframe下pos...
iframe在IOS里如何自适应宽度？
kakaxiD的博客
04-24 1712
iframe自动变宽了，在IOS手机上出现滚动条 第一步：定义 iframe 中的scrolling属性为no，设置iframe中不显示滚动条。 &lt;iframe scrolling="no" &gt;&lt;/iframe&gt; 第二步：设置iframe的样式为如下所示 iframe{ overflow: scroll; -webkit-overflow-...
vue进全屏和退出全屏
zzh990822的博客
11-06 890
<template> <div> <div class="fullscreen-button" @click="toggleFullscreen" v-show="is">全屏</div> <div class="fullscreen-button" @click="toggleFullscreen" v-show="!is">退出全屏</div> </div> </template>
iframe自适应问题
Amelian的博客
11-26 1110
对于iframe自适应的问题，网上也有很多相关的代码分析，这里添加上我使用过且已经生效的代码 1.适用页面中有单个多种iframe的情况 // iframe高度自适应(适用于多个iframe) var iframeidsnums = document.getElementsByTagName("IFRAME") var iframeids = [] //存储iframe的id值 for (var i = 0; i < iframeidsnums.lengt
iframe设置窗口自适应
qq_46524280的博客
10-25 976
iframe窗口自适应
iframe在移动端的跨域高度设置问题
weixin_30421525的博客
11-17 336
<iframe src='" + basePath + "indexpage/toMoreDraws' id='iframepage' width='100%' marginheight='0' marginwidth='0' frameborder='0' scrolling='auto' rel='external' onload='iframeLoad()'></ifram...
iframe自适应高度的方法
移动开发记录
02-18 134
一种方法：代码简单，兼容性还可以，大家可以先测试下 function SetWinHeight(obj) { var win=obj; if (document.getElementById) { if (win &amp;&amp; !window.opera) { if (win.contentDocument &amp;&amp; win.contentDocument....
iframe高度自适应
07-11
为了实现iframe的高度自适应，你可以使用以下方法： 1. 使用JavaScript动态调整iframe的高度。在父页面中，通过JavaScript获取iframe的内容高度，然后将这个高度应用到iframe的style属性中，以实现自适应效果。具体的代码如下： ```javascript <script> function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px'; } </script> <iframe src="your_page_url" onload="resizeIframe(this)"></iframe> ``` 在上述代码中，我们定义了一个名为`resizeIframe`的JavaScript函数，该函数将iframe的内容高度作为参数传入，并将其应用到iframe的style.height属性中。通过将该函数绑定到iframe的`onload`事件，当iframe加载完成时，会自动调用该函数进行高度调整。 2. 使用CSS样式表中的`height: 100%`属性。将iframe的高度设置为100%，使其根据父容器的高度进行自适应。具体的代码如下： ```html <style> iframe { height: 100%; } </style> <iframe src="your_page_url"></iframe> ``` 通过将iframe的CSS样式设置为`height: 100%`，它将根据父容器的高度进行自适应。 以上是两种常见的实现iframe高度自适应的方法，你可以根据具体的需求选择其中一种来使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值