解决HTML5 scale缩放空白问题

现有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代码的地方添加了样式；这样虽然是可以滑动，但是在邮箱这个界面的时候，滑动邮箱内容时出现了被禁止的橡皮筋效果，这个问题会放在下一篇文章解决；

解决HTML5 scale缩放空白问题

猜你喜欢