iphone下iframe问题记录

iframe在手机上展示正好一屏的内容，横向100%，纵向高度固定（例如500px）超出可滚动。

这些问题在Mac上、window上、Android上都是没有的。

这两个问题需要一起说

关于实现滚动

百度一下可以看到很多了

关于宽度溢出

本质是iOS手机内，iframe内页面 display:none 隐藏掉的元素宽度会依然计算在内（文章最后再给个demo吧）。

解决方案：

(1) 对于子页面不可控的情况下 最简单的解决办法

给iframe加上属性 scrolling="no"

页面会自动变得规规矩矩，虽然有 scrolling="no" 属性，在电脑上模拟会无法滑动，但是在iOS手机上会全部铺满，Y轴上可以依赖上面提到的父节点的属性进行滚动。

(2) 子页面可控 *** 作子页面

方法一：html加属性 width:100vw; ， 注意给html和body加属性width:100%无效

方法二：html加属性 width: 1px;min-width: 100%;

子页面不可控的情况下，无解。

可控的情况下，以下面这种布局来写子页面，子页面body下的全部内容全部包裹在#wrap这个dom中。用dom的滚动代替body的滚动。iOS手机下会认为子页面无尺寸。

子页面：

父页面：

在Mac（Chrome）上和Android上一切正常，使用iphone打开，会发现横向边界被截断了。

如果改为 overflow-x: scroll; 会发现横向可滑动的距离非常长。通过使用Mac Safari调试iphone可见

iframe内页面超出隐藏overflow:hidden元素的宽度也被计算在内了

你用jq的时候是在页面加载的时候就获取了，并不是点击的时候获取的。时机不对。

$('#btn2')click(function () {

var boxAheight = $("#frame_content")outerHeight(true);

alert(boxAheight);

})

我也没有更好的办法

因为我的测试环境下与你测试环境下不一致

bhtml

代码:

<iframe id="ttoday" src="chtml" border="0" frameborder="0" width="98%" scrolling="no"></iframe>

chtml

代码:

1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />1<BR />

<script language="JavaScript" type="text/javascript">

function $(){parentdocumentallttodaystyleheight = documentbodyscrollHeight;}$();$();

</script>

测试过的

你的代码写的没有错

如果我猜得不错的话,你是直接运行的这段代码!

先给你讲原理:

调用DOM对象,必须在页面(框架)完全下载完后才能构建DOM树, 所以我们一般是把这些代码封到一个函数内,再用windowonload来指向这样解决:

function show()

{

documentwrite(windowframes["cwin"]documentgetElementById("reg")styleheight);

}

windowonload=show;

也许你会说,那为什么我的innerHTML能获取到呢 请注意:完全下载!

明白了吧

1．由于<iframe>标记为有边框属性,所以,一般情况您设为100,他也与实际上大小有出入所以您可以设小一点，我的经验是一般调4个象素．

2<iframe>的长宽单位有两种，一种是百分比，另一种是象素．您给出的100应该是象素吧．所以直接输入100就可以了．

跨域问题，没法实现

因为你没法获取被包含页面的任何信息，当然包括它的高度。所有尝试都会以“拒绝访问”告终。

不过我不知道你要做的是网站还是单纯在本地跑的html页面，如果是本地html，可以简单地把文件扩展名改为hta就可以解决拒绝访问的问题，接着再获取其页面的高度并设置iframe的高度即可。关于高度的获取，可用“[iframe对象]contentWindowdocumentbodyclientHeight”，反正关键是contentWindow这个对象，有了它，你 *** 作iframe中的页面，就像 *** 作自己的页面一样轻松了。

但如果你做的网页是放到网站上去的，那没办法，浏览器考虑到安全性问题，是不允许某个网页去 *** 作不在同一个域下的页面的。你自己可以测试一下，当iframe的src是不同域下的网址时，获取contentWindow对象就会提示“拒绝访问”的。

以上就是关于iphone下iframe问题记录全部的内容，包括:iphone下iframe问题记录、jq怎么获取自适应高度的iframe高度的准确数值、iframe 自适应高度问题（采用追加100分）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！