iframe标签在PC端的使用

Posted 2020-12-25 xiechuanghong

随着前端框架的崛起 各种组件化 模块化开发 然而我发现在PC端要考虑兼容 ~~~~

自己琢磨着 在PC端怎么吧一个页面做成一个公共的部分  发现有个iframe标签可以在页面中嵌套

虽然iframe可以做成公共部分 但问题也是很多（PS：百度）

<iframe src="../home/home.html" id="cont" frameborder="0" scrolling="no" width="100%" height="100%;"></iframe>

<iframe src="../home/home.html" id="cont" frameborder="0" scrolling="no" width="100%" height="100%;"></iframe>

　用法就是这么简单  需要一个需要一个src页面地址 frameborder设置iframe边框为空 scrolling清除滚动条 我这里设置 嵌套进去的页面宽高为100%

这里有个问题就是 高度如果设置为100% 页面就会出现2个滚动条 或者当你iframe里面的高度大于屏幕高度 嵌套进去也会出现2条滚动条

我自己的解决办法就是百度拉~~~~      记录下代码 以后用的到

下面贴下前端前辈的代码 一共有3种解决办法

<div>
  <iframe frameborder="no" src="https://www.oschina.net/">
  </iframe>
</div>

　　

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

div {
  height: 100%;
  /*第一种解决方案*/
  /*font-size:0;*/

}

iframe {
  width: 100%;
  height: 100%;
  /*第二种解决方案*/
  /*vertical-aglin:top;*/
  /*第三种解决方案*/
  /*display:block;*/
}

　　这里我使用的是第一种方式 效果非常好 能解决问题！