网页frame引入实现全屏滚动,使用jquery实现浏览器兼容

近期做一个项目,其中有一个需求,就是网页中需要用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>

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

时间: 2024-10-11 21:04:49

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

onepage scorll全屏滚动插件

onepage scorll全屏滚动插件,它能够很方便.很轻松的制作出单页/全屏滚动页面.兼容主流浏览器,懒人图库推荐下载! 使用方法: 1.head区域引用文件onepage-scroll.css,jquery.min.js,jquery.onepage-scroll.min.js及以下样式 .page1 { } .page2 { background-color: #FF7F50;} .page3 { } .page4 { background-color: #f90;} p.title {

自己用js实现全屏滚动

参照fullPage.js的效果,用自己的想法实现的. 实现的效果:1.全屏滚动,滚动一下齿轮就会滚动全屏. 2.自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏. 下一步计划: 1.改成react组件 2.实现更多的效果 注释写的很清楚,基本上知道函数怎么用就可以了.有想法这东西就很简单. 这里偷懒使用了我之前写过的一个运动框架(其实就是一个函数),稍加修改就可以在这上面使用.框架相关:点击这里 注释非常详细了,就不说其他的了.直接上代码: 1 <!DOCTYPE html>

fullpage.js jq全屏滚动插件

fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下载查看http://www.dowebok.com/77.html) 一.fullPage.js实现全屏 fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js 1.基本演示 1.1 引入文件 <!-

使用fullPage做的大图片全屏滚动

本地的图片和css等文件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>fullPage.js - 背景演示_dowebok</title> <!--网页的链接css <link rel="stylesheet" href="http://cdn.dowe

全屏滚动实现:fullPage.js和fullPage

fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. 一.fullPage.js实现全屏 fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js 1.基本演示 1.1  引入文件 <!-- 引入css --> <link rel="stylesheet&quo

pagePiling.js - 创建美丽的全屏滚动效果

在线演示 在线演示 本地下载 全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主流浏览器,包含IE8+.支持移动设备.

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

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

jQuery全屏滚动插件fullPage.js中文帮助

简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 兼容性 fullPage.js 支持 IE8+ 及其他现代浏览器. 使用方法 1.引入文件 <link rel="stylesheet" href="css/

学习 | jQuery全屏滚动插件FullPage.js

简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式 兼容性 fullPage.js 支持 IE8+ 及其他现代浏览器.测试代码 测试代码 <!DOCTYPE html> <html lang="en">