最近在酷版上我要做一個內嵌別人的網頁的在線服務頁面，於是必須用到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/