iframe高度宽度自适应

最近在项目中用到了iframe，写出来做个记录，能帮到大家最好。

一.首先简单介绍一下iframe

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

所有浏览器都支持 <iframe> 标签。

二.页面引用

<iframe src="index.html" id="myiframe" scrolling="no" frameborder="0" width="100%" οnlοad="changeFrameHeight()" frameborder="0"></iframe>

三.设置iframe的高度自适应

<!--set iframe height  --><script type="text/javascript">function changeFrameHeight(){var iframe= document.getElementById("myiframe");iframe.height = iframe.contentDocument.body.clientHeight;}window.οnresize=function(){changeFrameHeight();}</script>

四.设置iframe的宽度自适应

iframe的使用是为了引入一个子页面，如果说子页面是自适应的，那么宽度自适应自然很容易解决。但是如果子页面是通过内容编辑器生成并且没有做自适应处理，那么问题就没那么简单了。或许你会用viewport进行解决，这个也是一个思路，但是子页面与主页面的viewport之间的关联需要处理。

我说的这种情况自然不是用viewport。而是使用-webkit-transform:scale();对iframe进行缩放。实现设备是iPhone8与华为P8高配版。

首先说明，iframe的宽度如果不能自适应那么在两个设备的展现情况不一样。iPhone上边可以左右滚动以查看所有的内容，但是在安卓上边会自动截取手机屏幕宽度的iframe，也就是不会左右滚动。参考资料：https://www.cnblogs.com/qiuer/p/6420130.html

http://blog.csdn.net/u011511086/article/details/78519681

其次介绍一下有关-webkit-transform:scale();的用法，参考资料：http://caibaojian.com/transform.html

http://www.w3school.com.cn/cssref/pr_transform.asp

整体的思想就是计算出手机宽度与iframe内容宽度的比例，然后按照这个比例进行缩放，即-webkit-transform:scale();的作用。

所以就要获得两个宽度的值。

获取iframe的不同类型的宽度：Android  iPhone 手机浏览器获取子页面宽度。// var phoneWidth = document.body.clientWidth;//手机宽度// var iframeWidth = document.getElementById("myiframe").contentWindow.document.body.offsetHeight;//iframe宽度// 360  2602 ->  375 2628// var phoneWidth = document.body.clientWidth;//手机宽度// var iframeWidth = document.getElementById("myiframe").contentDocument.body.clientWidth;//iframe宽度// 360  310  ->  375 876// var phoneWidth = document.body.clientWidth;//手机宽度// var iframeWidth = document.body.scrollWidth;//iframe宽度// 360  360  ->  375 910// var phoneWidth = document.body.clientWidth;//手机宽度// var iframeWidth = document.getElementById("myiframe").contentWindow.document.body.scrollWidth;//iframe宽度// 360  884  ->  375 892  采用的这一种。

注释：箭头前是安卓设备，之后是苹果设备。第一个数是手机宽度，第二个数是iframe的宽度。

核心代码：

var obj = document.getElementById("myiframe");var phoneWidth = document.body.clientWidth;//手机宽度var iframeWidth = document.getElementById("myiframe").contentWindow.document.body.scrollWidth;//iframe宽度var n = phoneWidth/iframeWidth;//缩放比例if (userAgentInfo.indexOf('Android') > -1 || userAgentInfo.indexOf('Linux') > -1) {obj.width = iframeWidth + "px";}obj.style.webkitTransform="scale("+ n +")";

以上测试均是真机测试，浏览器包括QQ浏览器安卓与苹果版本，以及苹果和安卓的自带浏览器。

经过缩放之后会出现左右滑动，但是内容区域已经适应了手机宽度，这时再用document.body.style.overflowX="hidden";禁止左右滚动即可。以上均是自己的见解，如有不足之处还望多多见谅。

五.iframe的属性

iframe常用属性:
1.frameborder:是否显示边框，1(yes),0(no)
2.height:框架作为一个普通元素的高度，建议在使用css设置。
3.width:框架作为一个普通元素的宽度，建议使用css设置。
4.name:框架的名称，window.frames[name]时专用的属性。
5.scrolling:框架的是否滚动。yes,no,auto。
6.src：内框架的地址，可以使页面地址，也可以是图片的地址。
7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
8.sandbox: 对iframe进行一些列限制，IE10+支持

六.iframe参考文档

https://segmentfault.com/a/1190000004502619#articleHeader6
https://www.cnblogs.com/inJS/p/6129945.html
http://www.cnblogs.com/tugenhua0707/p/3346522.html

iframe高度宽度自适应相关推荐

iframe高度宽度自适应（转）
http://www.cnblogs.com/snandy/p/3900016.html 跨子域的iframe高度自适应完全跨域的iframe高度自适应同域的我们可以轻松的做到 1. 父页面通过i ...
iframe高度动态自适应
参考:http://www.zhangxinxu.com/wordpress/?p=1294 一.前言碎碎念我从来对iframe就没有什么好感,对其基本上是不屑一顾.但是人在江湖,身不由己.经理发话 ...
微信小程序 swiper轮播图高度宽度自适应（解决轮播图图片显示不全问题）
之前从来没有接触过前端,最近开始学习微信小程序,因为没有基础所以学起来有点难度.在学习这个swiper标签的时候遇到了一些问题.首先一个问题就是轮播图中的图片显示不全,尽管已经给image设置成了wi ...
uniapp 视频图片切换，视频高度宽度自适应
uniapp 视频图片预览视频宽度自适应, 视频图片左右切换, 图片点击放大预览 <template><view class="container">& ...
css如何自适应浏览器的高度,div css 高度宽度自适应浏览器屏幕大小
DIV布局--IT北瓜原创 html,body{ font: 100% 微软雅黑, 宋体, 新宋体; margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 ...
纯css实现iframe高度自适应
当我们转载文章或者发布文章时经常会需要用iframe标签引入视频或者网页,但是用iframe标签引入视频最大的一个问题就是无法自适应高度,宽度不是什么大问题,只有我们在iframe标签中加入width ...
原创,真正解决iframe高度自适应的问题.兼容各浏览器
在Google输入关键字"iframe自适应高度"之后你会发现有"找到约 153,000 条结果",我大概的看了一下,发现基本上就那两三篇文章被转载来转载去.真 ...
div中iframe高度自适应问题
网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...
iframe高度自适应的6个方法
iframe内容未知,高度可预测这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用JavaScript改变高度.常用的兼容代码有: // document.domain ...

iframe高度宽度自适应

iframe高度宽度自适应相关推荐

最新文章

热门文章