iframe嵌入网页如何实现隐藏部分内容

文章介绍了两种方法来实现页面内嵌元素的定位:一是使用CSS移动并隐藏溢出部分;二是通过URL传参,利用被嵌入页面的逻辑控制元素显示。后一种方法适合对嵌入页面有编辑权限的情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目前找到两种方法

1. 通过CSS移动位移,超出部分隐藏

以下代码外层div用来设置溢出部分隐藏,内层div可以按需调整margin-left和margin-top来实现要嵌入的位置

<div style="position: relative;left: 0px;top: 10px;overflow: hidden;">
   <div style="width:100%;height:calc(100vh - 40px);margin-top: -100px">
       <iframe :src="url" height="100%" width="100%" frameborder="0"></iframe>
   </div>
</div>

2. url传参

1用的还不够熟练,像之前遇到页面元素宽度会自适应,计算那个margin-left和margin-top的值有些偏差,又想到一个办法:在嵌入的url后面自定义一个参数比如“http://xxxx.com/a/b?flag=1”,其中flag=1是我们传入的参数,然后在被嵌入的网页代码中去加逻辑,判断当前url是否带参数flag=1,如果带了,则可以加一些对应的逻辑,比如隐藏某一块内容。(前提是对被嵌入的网页代码有修改权限)