<template> <div class="card-index pt-relative"> <div id="wrapper" :style="‘height:‘ Height ‘px;‘"> <iframe v-if="iframeType" :src="srcUrl" sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-modals" id="iframe" marginwidth="0" marginheight="0" align="center" ></iframe>
<iframe v-else :src="srcUrl" sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-modals" id="iframe" scrolling="no" marginwidth="0" marginheight="0" align="center" ></iframe>
</div> </div> </template> data() { return { srcUrl: "", iframeType: false }; }, created() { var u = navigator.userAgent; var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端 // var isiOS = !!u.match(/(i[^;] ;( U;)? CPU. Mac OS X/); //ios终端 // console.log(‘是否是Android：‘ isAndroid); // console.log(‘是否是iOS：‘ isiOS); if (isAndroid) { this.iframeType = true; } else { this.iframeType = false; } }
<style lang=‘scss‘ scoped> .card-index /deep/ { width: 100%; position: relative; #iframe { width: 100%; height: 100%; overflow: scroll; -webkit-overflow-scrolling: touch; min-width: 100%; *width: 100%; width: 1px; }
#wrapper { -webkit-overflow-scrolling: touch; overflow: auto; position: fixed; right: 0; left: 0; top: 0; bottom: 0; width: 100%; height: 100%; } </style>