酷版移动端iframe改变src，重新加载页面问题探究

最新推荐文章于 2023-04-17 14:49:31 发布

weixin_34250709

最新推荐文章于 2023-04-17 14:49:31 发布

阅读量267

点赞数

原文链接：http://www.cnblogs.com/jq-melody/p/4126062.html

版权

　　最近在酷版上我要做一个内嵌别人的网页的在线服务页面，于是必须用到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/

转载于:https://www.cnblogs.com/jq-melody/p/4126062.html

weixin_34250709

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
酷版移动端iframe改变src，重新加载页面问题探究

　　最近在酷版上我要做一个内嵌别人的网页的在线服务页面，于是必须用到iframe，以前我以为移动端不支持iframe呢，原来这样都可以。。。。（呵呵，长见识了！我还是只菜鸟）直接入正题，说说我遇到的困难或者说是我需要解决的问题：1、重构人员提供页面之后，我给页面上的iframe设置一个src属性，发现那个页面根本不能上下滑动。我就到处搜，有的人说酷版移动端iframe里面不会像pc端一样自...
复制链接

扫一扫