Markdown 编辑器：全屏功能限制作用域
markdown编辑器的这个全屏功能，默认采取的高度与宽度为window的宽高，怎样去限定或者修改这个数值，将全屏功能限定在我指定的一个div内
应该是类似这种吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a {
width: 300px;
height: 200px;
border: 1px solid yellow;
position: relative;
}
#b {
width: 200px;
height: 100px;
background-color: #0000FF;
position: absolute;
transform-origin:left top;
}
#c {
width: 40px;
height: 20px;
border: 1px solid green;
background-color: papayawhip;
}
#d {
width: 800px;
height: 600px;
border: 1px solid red;
position: absolute;
left: 320px;
top: 100px;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
<div id="c" onclick="fullScreen()">放大</div>
1111111111
</div>
</div>
<div id="d">
<!-- 需要全屏放大的位置 -->
</div>
<script type="text/javascript">
let isfull = false;
function fullScreen() {
let doc = document;
if (!isfull) {
let rateX = parseInt(doc.getElementById("d").clientWidth) / parseInt(doc.getElementById("b").clientWidth);
let rateY = parseInt(doc.getElementById("d").clientHeight) / parseInt(doc.getElementById("b").clientHeight);
doc.getElementById("b").style.transform = `scale(${rateX},${rateY})`
doc.getElementById("d").appendChild(doc.getElementById("b"))
isfull = !isfull
} else {
doc.getElementById("b").style.transform = `scale(1, 1)`
doc.getElementById("a").appendChild(doc.getElementById("b"))
isfull = !isfull
}
}
</script>
</body>
</html>
element.requestFullscreen();element设置是子容器。看H5的全屏api文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a {
width: 300px;
height: 200px;
border: 1px solid yellow;
}
#b {
width: 200px;
height: 100px;
border: 1px solid red;
background-color: #0000FF;
}
#c {
width: 40px;
height: 20px;
border: 1px solid green;
background-color: papayawhip;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
<div id="c" onclick="fullScreen()">放大</div>
</div>
</div>
<script type="text/javascript">
let isfull = false;
function fullScreen() {
if (!isfull) {
document.getElementById('b').requestFullscreen();
isfull = !isfull;
} else {
document.exitFullscreen();
isfull = !isfull;
}
}
</script>
</body>
</html>