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

原创于 2023-12-28 17:46:16 发布 · 2.5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

文章介绍了两种方法来实现页面内嵌元素的定位：一是使用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，如果带了，则可以加一些对应的逻辑，比如隐藏某一块内容。（前提是对被嵌入的网页代码有修改权限）