使用iframe嵌套第三方网页并隐藏头部和底部信息

[复制链接]
查看: 508|回复: 0

13

主题

13

帖子

43

积分

新手上路

Rank: 1

积分
43
发表于 2020-12-30 14:37:05 | 显示全部楼层 |阅读模式
通过对<div>标签高度控制来隐藏第三方页面底部内容,设置<iframe>标签中的margin-top上部边距来隐藏页面的头部导航栏信息等。

代码实现(以百度首页展示为例):
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. html,body {
  7.         height: 100%;
  8.         overflow: hidden;
  9. }

  10. * {
  11.         margin: 0;
  12.         padding: 0;
  13. }
  14. .container {
  15.         width: 100%;
  16.         height: calc( 100% + 600px );
  17.         height: -webkit-calc(100% + 600px);
  18.         overflow: hidden;
  19.         margin: 0;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24.         <div class="container">
  25.                 <iframe id='iframeid'
  26.                         src='https://www.baidu.com'
  27.                         style="margin-top: -210px; width: 100%; display: block;"
  28.                         frameborder="0" marginheight="0" marginwidth="0" border="0"
  29.                         hspace="0" vspace="0" scrolling="yes" height="100%" width="100%"></iframe>
  30.         </div>
  31. </body>
  32. </html>
复制代码
参数说明

margin-top: -210px:通过调整<iframe>标签中margin-top值的大小来控制网页头部需要展示的位置。

height: calc( 100% + 600px ); 通过调整<div>容器中height属性calc( )函数 "+"后的值大小来控制网页底部要隐藏的位置。

注意:

    (1).在浏览器缩放时,网页底部隐藏的部分可能会显示,在使用时需根据具体业务场景进行px值大小调整。

    (2).确保浏览器对 calc()函数的支持,本次案例可以满足对火狐浏览器以及谷歌浏览器的适配。

效果展示



腾讯云
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

精彩图文



在线客服(工作时间:9:00-22:00)
400-600-6565

内容导航

微信客服

Copyright   ©2015-2019  云服务器社区  Powered by©Discuz!  技术支持:尊托网络     ( 湘ICP备15009499号-1 )