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

夏与冰

于 2023-12-28 17:46:16 发布

阅读量2.5k

点赞数 6

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_35641191/article/details/135274912

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