現有IOS應用，郵箱功能需要預覽郵箱內容，但是郵箱內容都是有固定高寬，也就是這個頁面實際上是在PC上顯示，

所以現在，在APP上預覽時就出現內容過寬，過長；導致APP頁面被拉伸變的很醜；

html中使用的iframe巢狀的郵箱內容；網上都說IOS上使用iframe有諸多問題，實際上我並沒有發現像網友說的那麼不堪；

使用iframe巢狀網頁後，使用scale進行縮放會存在，下端空白問題。

現在說一下解決方案，直接貼程式碼：

HTML程式碼：

<div id="mailFormData" style="height: 100%;overflow-x: hidden;overflow-y: auto;">  /*overflow-y: auto;*/
    <div id="mailFormBox" style="max-height:400px;overflow-x: hidden;overflow-y: scroll;-webkit-overflow-scrolling:touch;"> /*overflow-x: hidden;overflow-y: auto;*/
        <iframe id="mailContent" frameborder="0" style="margin-left: -11px; width: 100%;"></iframe> 
    </div> 
</div>
 

原JS程式碼：

            var clientWidth = document.body.clientWidth;
            console.info("clientWidth:" + clientWidth);
            var contentDoc = document.getElementById("mailContent");
            contentDoc.srcdoc = content;
            let ifr = document.getElementById('mailContent');
            ifr.onload = function () {
                let wd = ifr.contentWindow.document.documentElement.scrollWidth;
                let ht = ifr.contentWindow.document.documentElement.scrollHeight;
                let x = document.getElementById('mailContent').clientWidth / wd;
                ifr.style.width = wd + 'px';
                ifr.style.height = ht + 'px';
                ifr.style.transform = `scale(${x})`;
                ifr.style.transformOrigin = '0 0';

                document.getElementById('mailFormData').style.width = clientWidth - 20 + "px";
                let box = document.getElementById('mailFormBox');
                box.style.height = ht * x + 'px'
                box.style.width = clientWidth - 20 + "px";
            }
 

這樣處理的程式碼只是寬度變了而已，縮放了，但是就出現了上面說的空白，因為這個網頁內容很長；所以縮放後實際高度是沒有變的

處理後的程式碼：

            var clientWidth = document.body.clientWidth;
            console.info("clientWidth:" + clientWidth);
            var contentDoc = document.getElementById("mailContent");
            contentDoc.srcdoc = content;
            var ifr = document.getElementById('mailContent');
            var screenW = window.screen.availWidth;
            ifr.onload = function () {
                var ifrDocument = ifr.contentDocument;
                var wd = ifrDocument.documentElement.scrollWidth;
                var ht = ifrDocument.documentElement.scrollHeight;
                var x = screenW / wd - 0.02;
                console.info(screenW + ":" + wd);
                ifr.style.width = wd + 'px';
                //ifr.style.height = ht + 'px';
                //ifr.contentWindow.scrollMaxY = ht * x + 'px';
                //ifr.style.transform = 'scale(' + x + ')';
                //ifr.style.transformOrigin = '0 0';
                //ifrDocument.body.style.transform = 'scale(' + x + ')';
                //ifrDocument.body.style.transformOrigin = '0 0';
                ifr.contentWindow.document.documentElement.style.transform = 'scale(' + x + ')';
                ifr.contentWindow.document.documentElement.style.transformOrigin = '0 0';


                document.getElementById('mailFormData').style.width = clientWidth - 20 + "px";
                var box = document.getElementById('mailFormBox');
                //box.style.height = ht * x + 'px';
                box.style.width = clientWidth - 20 + "px";
            }
 

這裡在前端經過多次除錯後，得出的；將上面的ifr修改為ifr裡面巢狀的整個html，這裡不是html的body，就是整個html進行縮放；另外，box的高度不用再去設定，因為我是要box固定在哪裡，太高會將下面的附件擠到下方看不見；

但是這裡還是有一個問題，比如說你接收到的是Twitter的郵件，這個郵件裡面會有一些連線，這些連線訪問是會timeout的，所以，在開啟類似的郵件時，郵件內容還是保持原樣並沒有縮放，要等待頁面中的link timeout時才會執行縮放的程式碼，所以這個是很不友好的；所以對於以上，再次調整程式碼：

            var clientWidth = document.body.clientWidth;
            var contentDoc = document.getElementById("mailContent");
            contentDoc.srcdoc = content;
            var ifr = document.getElementById('mailContent');
            var screenW = window.screen.availWidth;
            var isLoadFlag = false;
            ifr.onload = function () {
                scaleIframeSize();
            }
            setTimeout(function(){
                console.info("stop");
                if(ifr.contentWindow.stop) {
                    ifr.contentWindow.stop();
                } else {
                    ifr.contentDocument.execCommand('Stop'); // MSIE
                }
                scaleIframeSize();
            }, 1500);

            function scaleIframeSize() {
                if (isLoadFlag) return;
                isLoadFlag = true;
                var ifrDocument = ifr.contentDocument;
                var wd = ifrDocument.body.scrollWidth;
                var ht = ifrDocument.documentElement.scrollHeight;
                var x = screenW / (wd) - 0.02;
                console.info(screenW + ":" + wd);
                ifr.style.width = wd + 'px';
                ifr.contentWindow.document.documentElement.style.transform = 'scale(' + x + ')';
                ifr.contentWindow.document.documentElement.style.transformOrigin = '0 0';


                document.getElementById('mailFormData').style.width = clientWidth - 20 + "px";
                var box = document.getElementById('mailFormBox');
                box.style.width = clientWidth - 20 + "px";
            }

增加一個1500ms的定時器即可，雖說有的圖片可能會載入不出來，但是相比之前要和諧很多；

最後還有一個問題，因為這個是IOS上的應用，IOS的webview事由橡皮筋效果，我們在整個body是禁止了橡皮筋效果，但是添加了iframe之後，因為郵箱內容即使縮放有的內容還是很長，所以在針對有郵箱內容的時候我們還是需要可以滑動的，所以，在html程式碼的地方添加了樣式；這樣雖然是可以滑動，但是在郵箱這個介面的時候，滑動郵箱內容時出現了被禁止的橡皮筋效果，這個問題會放在下一篇文章解決；