近期做一个项目，其中有一个需求，就是网页中需要用frame引入页面并实现frame的全屏，在网上查了好多感觉方式都不尽相同，但是都不是介绍的很全面，浏览器的兼容也做的不好，自己总结了一些要点，需要的可以借鉴一下。

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>frame全屏</title>

</head>
<!--body定义一下overflow为hidden，要不然在有的浏览器会出现连个滚动条-->

<body style="padding:0; margin:0;overflow:hidden;">
<!--frame定义overflow为scroll，实现滚动-->

<iframe style=" overflow:scroll; width:100%;" src="http://www.m-ivi.com" id="iframepage"  ></iframe>
<!--引入jquery-->

<script src="./jquery-1.9.1/jquery-1.9.1.min.js"></script>
<!--简单的代码-->

<script>

    $(document).ready(function(){

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

        height=height+'px';

        $('#iframepage').css('height',height);

    })

</script>

</body>

</html>

文章分享自：艾维艾科技官网，感谢阅读。

网页frame引入实现全屏滚动，使用jquery实现浏览器兼容的更多相关文章

  1. 全屏滚动插件pagePiling.js

    全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...

  2. FullPage.js-基于 jQuery 的插件全屏滚动插件

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...

  3. fullpage.js全屏滚动插件使用小结

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...

  4. 自己用js实现全屏滚动

    参照fullPage.js的效果,用自己的想法实现的. 实现的效果:1.全屏滚动,滚动一下齿轮就会滚动全屏. 2.自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏. 下一步计划: 1.改 ...

  5. H5全屏滚动专题页最佳实践

    1.slip.js + rem.js 主要插件: slip.js github: https://github.com/binnng/slip.js rem.js 插件为阿里淘宝的 rem 实现的基础 ...

  6. pagePiling.js - 创建漂亮的全屏滚动效果

    全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...

  7. 全屏滚动-jQuery插件实现

    全屏滚动 <---很久没写了,这段忙了点,以后还是每周尽量写点东西---> 在很多情况下,我们需要页面的全屏滚动,尤其是移动端.今天简要的介绍一下全屏滚动的知识. 一.全屏滚动的原理 1. ...

  8. 《fullPage.js》创建全屏滚动的网站

    插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...

  9. 拥抱单页网站! jQuery全屏滚动插件fullPage.js

    不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...

随机推荐

  1. 46 关于Linux的I/O重定向

    I/O重定向是一个过程,这个过程捕捉一个文件.或命令.或程序.或脚本.甚至代码块(code block)的输出,然后把捕捉到的输出,作为输入发送给另外一个文件.或命令.或程序.或脚本. 1.I/O重定 ...

  2. htm explorer

    链接:https://github.com/450640526/HtmExplorer   最低环境 系统安装了.NET 4.0                地址:http://www.baidu. ...

  3. [置顶] Java编程笔试题之一 ----文件操作

    题目:给定一个文件和一个字符串,判断文件是否包含该字符串,如果包含,请打印出包含该字符串的行号以及该行的全部内容. 思路: ①使用缓冲流(BufferedReader)读取文件,定义初始行号为0.   ...

  4. 5分钟 搞定UIButton的文本与图片的布局

    UIButton内部文本和图片的布局是我们日常代码中,不可缺少的部分,按钮默认左边图片右边文本,那要实现左边文本,右边图片,我们该怎么解决呢,上面图片,下面文本又该怎么办呢 其实很简单,今天总结下,目 ...

  5. ios开发——实用技术OC－Swift篇&本地通知与远程通知详解

    本地通知与远程通知详解 一:本地通知   Local Notification的作用 Local Notification(本地通知) :是根据本机状态做出的通知行为,因此,凡是仅需依赖本机状态即可判 ...

  6. unix 网路编程（卷一）第一个程序编译过程

    unix卷一去年暑假买的到现在才开始看无比惭愧,而且惭愧第一个程序就断断续续弄了几天,要好好写程序了,马上要找工作了,下面介绍下把本书第一个程序跑起来的过程: 搜各种博客 我用系统的是ubuntu 1 ...

  7. iOS 并发概念浅析

    在进行iOS开发过程中,我们常会遇到网络请求.复杂计算.数据存取等比较耗时的操作,如果处理不合理,将对APP的流畅度产生较大影响.除了优化APP架构,并发(concurrency)是一个常用且较好的解 ...

  8. C# 之 读取Word时发生 “拒绝访问” 及 “消息筛选器显示应用程序正在使用中” 异常的处理

    1.Asp.net中建立Microsoft.Office.Interop.Word.Application时出现 “ 拒绝访问 ” 错误 项目中要实现在服务器端打开一个Word模版文件,修改其内容后再 ...

  9. jsp 用application对象制作留言板

    <%@ page contentType="text/html; charset=gb2312"%> <html> <body> <for ...

  10. swift的特点

      2个不需要: 1.不需要编写main函数:从上往下按顺序执行代码,所以最前面的代码会自动当做程序的入口   2.不需要在每一条语句后面加分号(也可以加):若是有多条语句在同一行就一定要加分号   ...