极客观点
项目管理
HarmonyOS
问题描述
不管怎么拖动浏览器窗口，看到的iframe窗口保持16:9，并且看到的iframe页面是一个完整的页面。并且在浏览器窗口中还要垂直水平居中
问题出现的环境背景及自己尝试过哪些方法
现有的方法可以实现垂直水平居中，但是在resize窗口时候iframe里面看到的只是局部，不是完整的
是否要transform:scale()缩放实现
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style rel="stylesheet" type="text/css">
*{margin: 0px; padding: 0px;}
body{position: relative;}
#myBtn{
height: 30px; line-height: 30px;
background: #00bcd4;
border-radius: 3px;
}
#dialogFrame{
position: absolute;
/* height: 100%;
width: 100%; */
/* overflow: hidden; */
top: 0; bottom: 0; left: 0; right: 0;
background: #333;
opacity: .5;
z-index: 10;
}
#closeBox {
z-index: 100;
position: absolute;
background-color: #ff8800;
border: 3px solid #00ff00;
box-sizing: border-box;
}
.closeIframe{
opacity: .8; position: absolute; right: 1%; top: 1%;width: 50px;height: 50px; cursor: pointer;z-index: 1010;
}
.closeIframe:hover {
opacity: 1
}
#myIframe{
position: relative; z-index: 1001;
}
</style>
</head>
<body>
<button id='myBtn'>点击出现iframe</button>
<!-- <div id="dialogFrame">
<div id="closeBox">
<div id="closeSpan" class="closeIframe">
<img style="width:50px;" src="./close.png" alt="close"/>
</div>
<iframe id="myIframe" width="100%" height="100%" scrolling="no" frameborder=0 src="http://www.baidu.com"></iframe>
</div>
</div> -->
</body>
<script>
window.onload = function () {
let btn = document.getElementById('myBtn')
btn.addEventListener('click', function() {
//遮罩层
let _dialogFrame = document.createElement('div')
_dialogFrame.setAttribute('id', 'dialogFrame')
document.getElementsByTagName('body')[0].appendChild(_dialogFrame)
// iframe外层div
let _closeBox = document.createElement('div')
_closeBox.setAttribute('id', 'closeBox')
document.getElementById('dialogFrame').appendChild(_closeBox)
let cliWidth = document.documentElement.clientWidth
let cliHeight = document.documentElement.clientHeight
//_closeBox垂直居中
_closeBox.style.height = cliHeight * cliWidth / 1920 + 'px'
_closeBox.style.width = cliHeight * cliWidth / 1920 * 16 / 9 + 'px'
_closeBox.style.top = (cliHeight - cliHeight * cliWidth / 1920) / 2 + 'px'
_closeBox.style.left = (cliWidth - cliHeight * cliWidth / 1920 * 16 / 9) / 2 + 'px'
//关闭的div
let _closeSpan = document.createElement('div')
_closeSpan.setAttribute('id', 'closeSpan')
_closeSpan.setAttribute('class', 'closeIframe')
_closeSpan.innerHTML = `<img style="width:50px;" src="./close.png" alt="close"/>`
_closeBox.appendChild(_closeSpan)
//iframe
let _iframe = document.createElement('iframe')
_iframe.setAttribute('id', 'myIframe')
_iframe.setAttribute('width', '100%')
_iframe.setAttribute('height', '100%')
_iframe.setAttribute('scrolling', 'no')
_iframe.setAttribute('frameborder', 0)
_iframe.setAttribute('src', '')
_closeBox.appendChild(_iframe)
window.onresize = function () {
//浏览器窗口改变
// document.body.clientWidth, document.body.clientHeight
let cliWidth = document.documentElement.clientWidth
let cliHeight = document.documentElement.clientHeight // 浏览器窗口页面的高度(除掉地址栏上面的),一个值
console.log('cliWidth =',cliWidth, 'cliHeight=', cliHeight, '============', cliHeight / cliWidth)
let scale = cliHeight / cliWidth //最大化时候,scale < 0.5625
let iframeZoom = 0
if(scale >= 9 / 16){
iframeZoom = cliHeight / 1080 // 缩放比例
_closeBox.style.width = cliWidth * iframeZoom + 'px'
_closeBox.style.height = cliWidth * iframeZoom * 9 / 16 + 'px'
_closeBox.style.top = (cliHeight - cliWidth * iframeZoom * 9 / 16) / 2 + 'px'
_closeBox.style.left = (cliWidth - cliWidth * iframeZoom) / 2 + 'px'
} else {
iframeZoom = cliWidth / 1920 // 缩放比例
_closeBox.style.height = cliHeight * iframeZoom + 'px'
_closeBox.style.width = cliHeight * iframeZoom * 16 / 9 + 'px'
_closeBox.style.top = (cliHeight - cliHeight * iframeZoom) / 2 + 'px'
_closeBox.style.left = (cliWidth - cliHeight * iframeZoom * 16 / 9) / 2 + 'px'
}
}
//关闭iframe
_closeSpan.onclick = function () {
_dialogFrame.remove()
}
})
}
</script></html>
transform:scale()缩放？怎么实现
你期待的结果是什么？实际看到的错误信息又是什么？
拖动浏览器窗口，保持16:9(窗口很小时候，看到的iframe也是一个正常的页面)