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
本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落
相关文章
|
5月前
自适应窗口图片轮播HTML代码
自适应窗口图片轮播HTML代码
41 2
自适应窗口图片轮播HTML代码
|
5月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
JavaScript
js全屏功能和取消全屏功能
js全屏功能和取消全屏功能
119 0
|
前端开发 JavaScript
利用JavaScript的控制图片的CSS位置实现轮播图功能
利用JavaScript的控制图片的CSS位置实现轮播图功能 上篇博客我们说到了如何给轮播图添加定时器效果,当然前面的两个轮播图功能实现都是通过改变图片的路径(图片名称取巧)实现的,有一定的局限性。今天说一说怎样通过改变位置实现轮播功能。效果如图: 在这里插入图片描述 HTML代码: &lt;div class=&quot;box&quot; id=&quot;box&quot;&gt; &lt;ul class=&quot;min_box&quot; id=&quot;banner&quot;&gt; &lt;li class=&quot;banner&quot;&gt;&lt;/li&gt; &lt;li class=&quot;banner&quot;&gt;&lt;/li&gt;
利用JavaScript的控制图片的CSS位置实现轮播图功能
|
前端开发
CSS样式控制页面的几种方式
1.行内样式。 把样式写在元素标记之间。 用css控制页面样式的行内样式 2.内嵌式 把样式写在head之间,并且用<style></style>包括起来。
207 0
|
Web App开发 移动开发 前端开发
Web全屏模式轻松掌握[局部元素全屏展示]
全屏功能封装在一个类里面: 我把全屏模式封装在一个类里面,在代码中有详细的注释,如果有需要的话,直接把类拿出来,根据栗子和注释使用即可。 代码在codepen的demo里。 何谓全屏? MDN介绍: 使用提供的API,让一个元素与其子元素,可以占据整个屏幕,并在此期间,从屏幕上隐藏所有的浏览器用户界面以及其他应用。 chrome下的全屏表现: 全屏会隐藏标签栏,书签栏 如果网页一开始不是全部撑开的形式,全屏下,也会将要全屏的元素充满整个屏幕 可以多层全屏,如栗子中一样,可以先左边全屏,然后红色全屏。
585 0
Web全屏模式轻松掌握[局部元素全屏展示]
|
JavaScript 前端开发
js实现页面滑动到最底部触发内容加载
js实现页面滑动到最底部触发内容加载
423 0