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

夏与冰

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

阅读量2.4k

点赞数 6

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/qq_35641191/article/details/135274912

版权

目前找到两种方法

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，如果带了，则可以加一些对应的逻辑，比如隐藏某一块内容。（前提是对被嵌入的网页代码有修改权限）