<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>