最近在酷版上我要做一个内嵌别人的网页的在线服务页面，于是必须用到iframe，以前我以为移动端不支持iframe呢，原来这样都可以。。。。（呵呵，长见识了！我还是只菜鸟）

直接入正题，说说我遇到的困难或者说是我需要解决的问题：

1、重构人员提供页面之后，我给页面上的iframe设置一个src属性，发现那个页面根本不能上下滑动。我就到处搜，有的人说酷版移动端iframe里面不会像pc端一样自动产生滚动条，我真的信了！于是我不得不让产品去和即将上线的几个合作方谈一下，让他们在页面里设置一个document.domain，然后在body上注册一个onload事件，页面加载完成后设置iframe的高度，这样即使iframe没有自动产生滚动条有了固定高度也能够看到所有页面。内嵌页面内容html如下

<body onload="setParentIframeHeight()">

<div class="wraper">内容...</div>    

<script>

function setParentIframeHeight(){

    document.domain=window.location.host.match(/[^.]+\.[^.]+$/)[0];

    parent.document.getElementById('serviceBody').style.height = window.document.body.scrollHeight + "px";

  }

</script>

</body>

这样做能解决问题，但是大大限制了能接入的页面的数量。

但是后来仔细看了一下下面的html，原来我被重构人员坑了，他给iframe加了一个scrolling = "no"，这让伦家怎么出现滚动条啊！

<article id="serviceContent" style="width:100%;height:100%;">

    <iframe id="serviceBody" width="100%" height="100%" frameborder="0" scrolling="no"></iframe><!--可能需JS计算高度    height="100%" -->

</article>

  

2、iframe内两个页面切换的问题

要切换iframe里的页面很简单，只要改变iframe的src属性值就可以了，有两种方式改变：

第一种：

document.getElementById('iframeId').src = "http://www.baidu.com";

第二种：

document.getElementById('iframeId').contentWindow.location.href = "http://www.sina.com.cn/";

　　但是有个问题，就是用这两种方式改变iframe里的页面地址，并不会重新加载页面，也就是不会触发body的onload事件，导致切换页面的时候滚动条没有回到最上面，所以只是在第一次创建那个iframe的时候才触发了一次，后面的页面都没有触发body的onload，找了好久都没结果，没办法只能使用绝招，把iframe一起干掉，既然改变src不会刷新页面，那么就每次都重新创建一个iframe，这样才终于解决了问题。

function createNewpage(container,newSrc) {

            var self = this;

            var iframe = document.createElement("iframe");

            iframe.src = newSrc;

            iframe.id = "serviceBody";

            iframe.style.width = "100%";

            iframe.style.height = "100%";

            container.appendChild(iframe);

            if (window.navigator.userAgent.indexOf('IE') == -1) { //非IE的浏览器

                iframe.onload = setIframe;

            } else {

                iframe.onreadystatechange = function() { //IE浏览器

                    if (iframe.readyState == 'complete') { //判断状态

                        setIframe();

                    }

                }

            }

            function setIframe(){

                doSomething else;

            }

}

上面的代码是参照这个改的：http://xiaogai1010.blog.163.com/blog/static/13717030820135932746318/

酷版移动端iframe改变src，重新加载页面问题探究的更多相关文章

  1. iframe中，重新加载页面

    比如在iframe中的页面,设置一个onclick事件的触发函数flush function flush(){ window.location.reload(); }

  2. 构建服务端的AMD/CMD模块加载器

    本文原文地址:http://trock.lofter.com/post/117023_1208040 . 引言:  在前端开发领域,相信大家对AMD/CMD规范一定不会陌生,尤其对requireJS. ...

  3. ExtJs非Iframe框架加载页面实现

    在用Ext开发App应用时,一般的框架都是左边为菜单栏,中间为tab页方式的显示区域.而tab页面大多采用的嵌入一个iframe来显示内容.但是采用iframe方式有一个很大的弊端就是每次在加载一个新 ...

  4. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

  5. RE：通过移动端滑动手势实现数据加载

      背景:         基于要尝试的移动端项目需要有一个通过上拉下滑手势达成加载不同数据的功能,其涉及到滑动手势和ajax数据加载方面的知识点.故对整个实现过程做一个记录整理.个人JS功底有限,看 ...

  6. layer iframe加载单个图片或者加载页面

    加载单个图片 layer.open({ type: , title: false, closeBtn: , area: '150px', skin: 'layui-layer-nobg', //没有背 ...

  7. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  8. 提取数据库字段里面的值，并改变+图片懒加载，jquery延迟加载

    要求:手机端打开某个页面的详细信息,因为网速或者别的原因,响应太慢,因为图片大的原因,希望先进来,图片在网页运行的情况再慢慢加载(jquer延迟加载) http://www.w3cways.com/1 ...

  9. jQuery - 动态创建iframe并加载页面

    <html> <head> <script language="JavaScript" src="jquery-1.11.1.min.js& ...

随机推荐

  1. Codeforces 123 E Maze

    Discription A maze is represented by a tree (an undirected graph, where exactly one way exists betwe ...

  2. 【hibernate】报错：org.springframework.dao.DataIntegrityViolationException: could not execute statement; SQL [n/a]; nested exception is org.hibernate.exception.DataException: could not execute statement

    报错如下: org.springframework.dao.DataIntegrityViolationException: could not execute statement; SQL [n/a ...

  3. 【gradle】mac下 gradle默认本地仓库位置

    gradle默认会把包缓存到用户目录的.gradle目录下,如果你打开.gradle\caches\modules-2\files-2.1,你会发现很多的jar包.mac上的话 ,也就是在/Users ...

  4. Mysql 性能优化20个原则(1)

    今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数据 ...

  5. iOS10获得系统权限

    iOS 10 对系统隐私权限的管理更加严格,如果你不设置就会直接崩溃,一般解决办法都是在info.plist文件添加对应的Key-Value就可以了. <!-- 相册 --> <ke ...

  6. Cocos2d-x 3.0 简捷的物理引擎

    Cocos2d-x 3.0 开发(九)使用Physicals取代Box2D和chipmunk http://www.cocos2d-x.org/docs/manual/framework/native ...

  7. Android studio 升级，不用下载完整版，完美更新到2.0

    Android studio 2.0 公布已有一旦时间,据说,速度大大提高了.但是一直没有尝试更新,看到大家相继更新,所以迫不及待就准备更新,但是.更新之路确实异常坎坷.询问度娘,千奇百怪的问题接憧而 ...

  8. FineReport实现java报表报表展示的效果图

    Java报表-动态折叠树 Java报表-段落明细表 Java报表-多层统计 Java报表-多源分片与冻结 Java报表-发票套打表 Java报表-非统一页面打印 Java报表-复杂票据 Java报表- ...

  9. spring MVC使用Interceptor做用户登录判断

    在任何一个项目中,我们必须要用到的就是用户登录,那么就少不了用户是否登录的判断,如果我们每一个请求都要去做一次判断,那么就会变得很麻烦,但我们复制粘贴的时候我们就要考虑我们的代码写的是不是有问题,是不 ...

  10. 1 npoi 网上 不用模板 设置密码 workbook.WriteProtectWorkbook("password", "admin"); 、、 2 locked.IsLocked = true; sheet1.ProtectSheet("password");NPOI操作EXCEL－－设置密码才可以修改单元格内容 3 模板设置密码 确定原密码 设置新密码

    1 workbook.WriteProtectWorkbook("password", "admin"); 还是可以进去 只读进去 可以编辑 编辑就另存为   ...