iframe标签在PC端的使用

随着前端框架的崛起 各种组件化 模块化开发 然而我发现在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;*/
}

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

原文地址:https://www.cnblogs.com/xiechuanghong/p/9379117.html

时间: 2024-10-25 20:54:43

iframe标签在PC端的使用的相关文章

PC端变成手机端的时候,把特效去掉(把canvas标签去掉)

PC端变成手机端的时候,把特效去掉(把canvas标签去掉)<script> if (screen.width < 768){ $('canvas').remove(); }</script> /*if($('window').width()<768){ $('canvas').css('display','none'); }*/ jQuery这种方法获取不到

HTML5 PC端框架

HTML5  PC端框架 1.        Bootstrap Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,Bootstrap的源代码是使用less编写的:基于jQuery框架开发,并在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件.Boo

CSS3及JS简单实现选项卡效果(适配手机端和pc端)

想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100%; overflow: hidden; } #bottom_box{ width: 100%; height: 50px; background-color: #eee; display: flex; //这是flex布局,父元素设置为flex,子元素设置几等份就是分成几等份 position:

第31章 项目实战-PC端固定布局[1]

学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一.准备工作 1.为了达到最低效果,第一个项目将采用1440x900的分辨率录制:因为,1024根本无法容纳最低宽度的页面:页面采用1280的最低宽度设计,去掉滚动条为1263像素. 2.第一个项目是PC端的固定布局,会采用像素(px)单位. 3.项目素材图片,是课外独立设计好的,课程不会去设计

[应用][js+css3]3D盒子导航[PC端]

CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网站[iframe中],并可浏览,关闭后返回原来状态. 4.PC端,将额外显示2个css3做的旋转盒子[没什么意义] 5.移动端只显示一个导航盒子[模拟器正常,真机无效,留待以后查看,兼容开发有待提高...] 注:原本打算排列导航盒子,这样的话导航也变得比较好玩 但是,如果使用iframe来显示网站预

聊聊PC端页面适配

目也pc端有适配的需求:目前我们pc项目的设计稿尺寸是宽度1920,高度最小是1080. 适配目标: 1.在不同分辨率的电脑上,网页可以正常显示 2.放大或者缩小屏幕,网页可以正常显示 对于宽度的适配 对于宽度适配: 首先设置html,body{width:100%;overflow-x:hidden;} 然后我们可以把页面分解为背景层(一般宽度都会大于1200px)和内容层(一般宽度都会小于1200px),对于背景层,我们一般都要求完全铺开,主要有以下几种情况: 1.背景色为纯色:我们可以直接

图片压缩(pc端和移动端都适用)

最近在做移动端遇到了一个问题就是: 手机拍照后,图片过大如果上传到服务器务必会浪费带宽,最重要的是流量啊 别慌,好事儿来了,务必就会有人去研究研究图片的压缩: 鄙人结合前人的经验,结合自己实战,总结出一个方法供大家参考. /** * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径 * @param {Object} obj * obj 对象 有 width, height, qual

移动端前端开发与PC端比有哪些不同?

1.pc端有ie,chrome,ff 内核兼容问题移动端,简单来说兼容问题相对较少.但是移动端要做好多分辨率的处理.移动端所有图片和所有html标签的尺寸都要减半. 2.移动端在布局跟js效果方面,与PC端有什么不同:先说布局方面:PC端最常用的就是固定宽度980px(也有960,1000,1200),然后水平居中 width:980px;margin:0 auto;但移动端就不能这么用了,因为很多网页都是可以横屏看,也可以竖屏看:很多屏幕的分辨率不一样:所以只要牵涉到移动端,就要牵涉到响应式(

jsWindow 对象 Window 对象 Window 对象表示浏览器中打开的窗口。 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。 注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。 Window 对象集合 集合 描述 frames[] 返回窗口中所有命

一.JSX简介 JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析. 如下(JS写法) var child1 = React.createElement('li', null, 'First Text Content'); var child2 = React.createElement('li', null, 'Second Text Content'); var