博客

多层嵌套iframe如何去除滚动条

  • Post author:
  • Post category:其他


我们在使用多层嵌套的iframe时，可能会遇到如下问题:

假设你的电脑分辨率为1920*1080,如果不是，可以将你的电脑分辨率调整到1920*1080,有一张图片恰好也是1920*1080,由于现在为前端比较流行，也是为了解耦，你可能需要使用iframe一层一层的嵌套,而这个图片需要显示在iframe的最底层，原因就是为了解耦，代码如下: 

<template>
    <div>
        <iframe id="myDivKK" src="http://localhost:8080"></iframe>
    </div>
 </template>
 <script lang="ts" setup>
 import {onMounted,nextTick} from 'vue'
 import { Button } from 'kitty-ui-cloud'
  window.onload=()=>{
  }
 </script>
 <style>
    canvas{
        border: 1px solid red
    }
    body,html,div{
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
    }
    #myDivKK{
        width: 100%;
        height: 100%;
        border-width: 0px;
    }
 </style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe id="myFrame" src="http://192.168.1.224:8081/"></iframe>
</body>
</html>
<style>
    #myFrame{
       width: 100%;
       height: 100%;   
       border-width:0px
    }
    body,html{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .myDiv{
        width: 100%;
        height: 100%;
    }
    body{
        margin: 0px;
    }
</style>

1、最外层页面: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="content"></div>
</body>
</html>
<style>
    body{
        padding: 0px;
        margin: 0px;
    }
  .content{
     width: 1920px;
     height:1080px;
     background-color: aqua;
  }
</style>

如上代码所示, 需要把外面两层html的滚动条隐藏掉，然后100%全屏就不会再出现滚动条了，同学们有遇到过这个问题吗，欢迎评论区留言讨论，反正我是被坑了，多用简单的也是做实验才是真理呀


版权声明：本文为m0_37790484原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。