iframe以全屏的方式引入一个页面

简介:

大家知道使用iframe可以引入一个页面,但是在默认状态下,iframe的宽度并不是全屏状态的。

这样的话,可能会严重影响我们的预览效果,下面就分享一段代码实例,它实现了全屏引入页面你的效果。

代码实例如下:

 

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style>

body{

margin:0;

padding:0;

overflow-y:hidden

}

</style>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script type="text/javascript">

window.onerror=function(){return true;}

$(function(){

headerH = 0;

var h=$(window).height();

$("#iframe").height((h-headerH)+"px");

});

</script>

</head>

<body>

<iframe id="iframe" frameborder="0" src="http://www.softwhy.com" style="width:100%;"></iframe>

</body>

</html>



原文发布时间为:2018-03-21
本文作者:admin
本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落
相关文章
|
JavaScript 定位技术
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
341 0
|
6月前
|
JavaScript
vue滚动到页面底部时加载
vue滚动到页面底部时加载
40 1
|
5月前
HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)
HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)
275 0
|
5月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
178 0
|
5月前
|
JavaScript
vue【解决方案】页面/路由跳转后,滚动条消失,页面无法滚动
vue【解决方案】页面/路由跳转后,滚动条消失,页面无法滚动
211 0
|
JavaScript 容器
js如何实现选项卡高亮+内容切换
js如何实现选项卡高亮+内容切换
140 0
|
JavaScript
js全屏功能和取消全屏功能
js全屏功能和取消全屏功能
132 0
|
前端开发
CSS样式控制页面的几种方式
1.行内样式。 把样式写在元素标记之间。 用css控制页面样式的行内样式 2.内嵌式 把样式写在head之间,并且用<style></style>包括起来。
224 0
|
前端开发 UED
【网页前端】CSS进阶之元素的背景以及清除浏览器默认样式
【网页前端】CSS进阶之元素的背景以及清除浏览器默认样式
296 0
【网页前端】CSS进阶之元素的背景以及清除浏览器默认样式
|
JavaScript
vue.js:点击空白区域关闭弹窗
vue.js:点击空白区域关闭弹窗
373 0