javascript iframe 兼容 ios 问题

当前位置: 首页 » 记录 » html » javascript iframe 兼容 ios 问题

分类: html 853阅读阅读模式

 

在 iOS 设备上不支持 iframe 的滑动

如下反例:

html 代码

  1. <iframe src=""></iframe>

css 代码

  1. iframe {
  2.  positionfixed;
  3.  right: 0;
  4.  bottom: 0;
  5.  left: 0;
  6.  top: 0;
  7. }

原因:iframe 嵌入后,ios 设备不支持 position:fixed; 属性,但在 Android 端是可以滚动。

对此,只能用另类的方法实现,在其外边加一层 div。

html 代码

  1. <div class="fuck-ios-iframe">
  2.  <iframe src=""></iframe>
  3. </div>

css 代码

  1. .fuck-ios-iframe {
  2.   positionfixed;
  3.   right: 0;
  4.   bottom: 0;
  5.   left: 0;
  6.   top: 0;
  7.   -webkit-overflow-scrolling: touch;
  8.   overflow-y: scroll;
  9. }
  10. .fuck-ios-iframe iframe {
  11.   height: 100%;
  12.   width: 100%;
  13. }

这样,就能正常滚动了。

 

对框架内变量处理问题

常规的,通过 window 或者 parent 来操作。

  1. // 调用变量
  2. parent.frames["iframeName"].someVar
  3. // 调用函数
  4. parent.frames["iframeName"].someFunc
  5. // 调用变量
  6. window.iframeName.someVar

很不巧,在ios不行,同时操作框架内容的 js 会报错,阻塞运行,注意。

后面尝试通过本地存储来解决。

 

iframe 在 ios 的高度问题

默认的,给 iframe 添加一个 100 % 高度,内容可以使其撑开,但在 ios 上是不行的,它只会显示一小部分。

解决办法可以通过js动态赋予高度,或者外层添加一个 div 通过控制 div 高度来达到目的,而框架只需要保持宽高保持 100% 即可。

 

还有些高度及其他问题,由于个人对 iframe 的排斥,不多描述。

 

 

 

 

 

 

 

 

 

 

 

 

 

相关文章

评论一下

【注意1】:首次评论使用表情将会进入审核状态。
【注意2】:无意义回复、乱打文字内容将会进入审核状态。
【注意3】:涉及辱骂、色情、政治、毒品、赌博内容将会进入审核状态。
【注意】:首次评论使用表情将会进入审核状态。
暂无评论