问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
你好，欢迎来到懂视！登录注册
IT
当前位置： 首页 - 正文

ios移动端iframe引入不兼容fixed怎么解决

发布网友 发布时间：2022-04-26 07:18

我来回答

共2个回答

懂视网 时间：2022-04-20 17:14

iframe的怪异问题很多，Android有很多手机也不正常。
不推荐在app上使用iframe。
双webview更安全，即把那个你原本放在iframe里的页面载入一个webview里，append到主页面里

具体表现为，当嵌套的子页面的高度大于父页面的高度，且子页面中有触发弹框事件时，这时，如果子页面高度远远大于父页面高度，就会出现弹框找不到的情况，其实可能是在视口以下，弹框的位置只是相对于子页面来定位，并没有相对于视口定位。尝试了好多种方法，均不理想，而安卓系统则表现良好，于是想到，iOS系统可直接做页面跳转，而安卓系统则正常使用iframe（如果安卓系统直接做页面跳转，会有问题，即按下物理返回键时，之前的表单提交页的内容无法正常清空，而且如果嵌套多个表单，相应栏位会出现错乱情况。故使用iframe），直接看代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><title>网上申请</title></head><body><script src="js/zepto.min.js?1.1.11"></script><script>$(function() {var originId = sessionStorage.setItem('originId', '3'); //originId为后台需要判断是哪个入口的值var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if (isAndroid) {//安卓终端使用iframevar winH = $(window).height();var iframe = document.createElement('iframe');
  iframe.src = "index_common.html";
  iframe.style.width = '100%';
  iframe.style.height = winH + 'px';
  iframe.style.border = '0 none';
  iframe.setAttribute('scrolling', 'auto');
  document.body.appendChild(iframe);
 } else if (isiOS) {//iOS终端直接页面跳转  location.href = 'index_common.html';
 } else {
  location.href = 'index_common.html';
 }
 })</script></body></html>

弄了蛮久，记录下自己的成长，如果有遇到类似问题的小伙伴，可以看看，也希望又看到可以改进的地方，多多指教。

热心网友 时间：2022-04-20 14:22

<script>
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
//修改服务器页面的meta的值
NSString *meta = [NSString stringWithFormat:@"document.getElementsByName(\"viewport\")[0].content = \"width=%f, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\"", webView.frame.size.width];
[webView stringByEvaluatingJavaScriptFromString:meta];
}
// NSString *js_fit_code = [NSString stringWithFormat:@"var meta = document.createElement('meta');"
// "meta.name = 'viewport';"
// "meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes';"
// "document.getElementsByTagName('head')[0].appendChild(meta);"
</script>

兼容ios系统。
。
—— 【仙】墨纸
iframe引入的页面的position:fixed属性无效,求解决方法(前提是保留pos...

把那个固定定位的元素拿到iframe外边。这种方案比较容易实现。要不就把那个浮动元素用绝对定位配合js来实现

iframe里的position:fixed样式失效怎么解决

position:fixed之所以会失效是因为这个属性会收到父级元素属性的影响，b.html单独运行的时候，父级是body,但链接到a.html的 iframe中时候，父级就变成了iframe或者说是a.html,解决办法就是在iframe上添加position属性，具体的值是absolutely还是relative记不清了，自己试试吧 ...

Web前端岗位面试题有哪些

2、音视频元素,video,audio的增加使得我们不需要在依赖外部的插件就可以往网页中加入音视频元素。3、新增很多api,比如获取用户地理位置的window.navigator.geoloaction,4、websocketwebsocket是一种协议,可以让我们建立客户端到服务器端的全双工通信,这就意味着服务器端可以主动推送数据到客户端,5、webstorage,webstorage...

iframe不兼容ie iframe在ios的兼容 苹果不兼容iframe框架吗 iframe谷歌浏览器不兼容 iframe调整ie兼容模式 iframe不受兼容模式 ios不支持iframe iframe兼容 Chrome无法加载iframe
声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:11247931@qq.com
这是什么牌的钥匙 诗句排比是什么意思 申请契税减免多久 申请契税减免的审批时限是多久? 盘锦房交会免契税多久反 成都橡树林到九龙有多远 从梁家巷客运站怎么到锦江区石牛堰街 从成都金沙金阳路到达锦江区石牛堰街33号3楼橡树林最近路线 2022世界杯威尔士队阵容名单 世界杯威尔士首发阵容 威尔士足球代表队球队阵容 莆田市秀屿区双星照明电器有限公司怎么样? 页面怎么切换 梦见手指被蛇紧紧吸住 线描画妈妈的高跟鞋、风筝可以画啥背景 移动端嵌套iframe手点击input 键盘没弹出是什么原因 页面分别怎么设置? 网关是不是相当于路由器? 指头被蛇咬了怎么办? 无线路由器能不能把无线网关了当成普通路由器来用? 天翼网关能当路由器用吗?输出口直接链接电脑可以上网吗? 移动的家庭网关能简单的充当路由器吗? 联通家庭网关可以当路由器吗 蓝牙耳机戴不进去怎么办 家庭网关能不能当路由器用啊? 网关可以当路由器吗 耳朵戴不上蓝牙耳机怎么办 中通联通的智能网关能当路由器用吗? 蓝牙耳机戴不住怎么办? 你好,网关可以当做路由器使用吗 蓝牙耳机戴着舒服吗? 蓝牙耳机是不是戴上就可以 怎样调整页面? 都说不用 iframe,那么网页分块用什么方法呢? 中班美术妈妈的头发线描画教案 除了自己买的医保报销之外,食道癌还可以申请大病医疗报销吗? 手被蛇咬了怎么办? 移动端怎么将一个html页面嵌入另一个html 91岁老人食管癌住院费用65000元左右，医保报销和大病医疗保险能报多少？ bark怎么读 video 在移动端浏览器变现的层级太高,总是在最高层,如何解决; 英语bark如何发音 食道癌医保报销多少 html5 iframe常用吗 bark这个单词怎么记 出纳人员不得兼任稽核、会计档案保管和收入、支出、费用、债权债务账目的登记工作。是否就是出纳不得做应 食道癌属于重大疾病吗,住院治疗费如何报销 手指被蛇咬伤后,已经打了血清,但是手臂现在还肿,怎么办? 怎么让网站内引用的外部链接变成移动端的 出纳不能兼任的4个岗位工作有哪些? bark 可以解释为狗叫，也可以解释为树皮，，语义怎么相差这么大？ 我老伴现在是食管癌贲门癌大病医保怎样办理
  • 焦点

最新推荐

猜你喜欢

热门推荐

产品服务 发展历程 企业资讯 企业文化 关于我们 加入我们 联系我们 网站导航 网站律师

Copyright © 2019-2022 51dongshi.com 版权所有

赣ICP备2023002352号-2

违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务