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

最新推荐文章于 2024-11-14 10:56:19 发布
最新推荐文章于 2024-11-14 10:56:19 发布
阅读量67 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/mivi/p/5481656.html
版权

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

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

转载于:https://www.cnblogs.com/mivi/p/5481656.html

weixin_33976072
关注
通过JavaScript+IFRAME实现页面分屏加载
郑州昇博世纪
12-30 922
[b]前言：[/b] 为了篇幅太长会影响到阅读兴趣，代码都不粘贴太多，最好配合源码阅读，不然又些地方你会有点不明白。 [b]问题？[/b] 往往在项目中会展现很高的页面，为了考虑加载速度，我们会使用延迟加载，刚开始我只进行图片延迟加载，其后又发现不妥，因为一个页面的加载并非只有图片，这样的话，我们可以需要为整个页面分屏加载显示。 [b]整个思路如下：[/b] 考虑到分屏最简单的就...
jQuery.NiceScroll - 有史以来最好的 nicescroll 版本——在现代浏览器和移动设备上极其流畅和一致，资源使用率低(中文文档)
包子的博客
02-20 993
有史以来最好的 nicescroll 版本——在现代浏览器和移动设备上极其流畅和一致，资源使用率低NiceScroll是一个jQuery插件,用于与ios/mobile风格非常相似的漂亮滚动条.您将获得：可自定义和可滚动的 div，具有适用于 iPad 的动量以及适用于所有桌面和移动平台的一致的可滚动区域。性感的缩放功能：您可以“放大”任何启用 nicescroll 的 DIV 的内容。好用好看：全屏模式下 DIV 的所有内容。
浏览器兼容问题
weixin_30409849的博客
02-07 236
css兼容 1.width：在html文档没有DTD声明时，IE6会按照怪异解析的模式去解析我们设置标签的宽，高则不变。（例如：正常声明下的盒模型解析是width+margin+padding+border的值，但是怪异解析下就是将这些所有的设置全计算到我们设置 的宽内。{div width：400px；border：100px；padding：0 50px；在加了DTD声明或未加声...
iframe和iframe实现页面内嵌套一个页面（jsp）
admin__istrator的博客
07-19 1万+
相信刚学习javaweb的同学都十分好奇页面上点击一个按钮下面就显示一个页面，点击不同的导航栏按钮，下方就会显示不同内容，这就用到了iframe标签的src属性。下面就给大家介绍一下iframe的使用及嵌套页面的实现 下面展示一些 内联代码片。 先给大家写一下嵌套页面的实现代码 <iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="${pageContext.request.contextPath}/
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
11-28
本篇文章将深入探讨在使用jQuery 3.x版本与LayUI框架时遇到的一个具体问题：当尝试使用LayUI的`layui.layer.full`方法打开全屏iframe窗口时，窗口顶部会出现152px的高度滚动条，导致无法实现真正的全屏显示。...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
jquery实现全屏滚动
10-23
主要介绍了jquery实现全屏滚动，针对全屏滚动知识进行详细阐述，感兴趣的小伙伴们可以参考一下
web前端面试题及答案汇总
热门推荐
dongyang0311
06-26 1万+
Doctype作用？严格模式与混杂模式如何区分？它们有何意义? HTML5 为什么只需要写 ？ 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 页面导入样式时，使用link和@import有什么区别？ 介绍一下你对浏览器内核的理解？ 常见的浏览器内核有哪些？ html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼
jQuery插件fullPage.js实现全屏滚动效果
10-20
主要为大家详细介绍了jQuery全屏滚动插件fullPage.js的使用方法，可制作全屏滚动网页,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端 基础面试问题汇总
技术改变世界
04-24 1208
1&gt;、html5有哪些新标签？ &lt;article&gt; 标签定义外部的内容（外部内容如blog,news）。 &lt;aside&gt; 标签定义article以外的内容（可用做文章的侧栏）。 &lt;canvas&gt;使用JavaScript在网页上绘制图形图像。 &lt;details&gt; 用于描述某个文档部分的内容。 &lt;sum...
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 410
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 746
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
Vue中的常用指令
m0_62388400的博客
11-12 1143
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 154
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
从零开始快速构建Vue3项目
欧唯薇
11-13 693
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
Vue常用加密方式
m0_51431448的博客
11-13 95
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
Nuxt2和Nuxt3 对于SEO优化的区别
最新发布
书山有路_邓
11-14 331
nuxt
第三十七章 Vue之编程式导航及跳转传参
Calvin的博客
11-10 1583
前面的章节我们学习了声明式导航的路由跳转，简单理解就是通过链接形式的路由跳转，本章节我们来学习下编程式导航跳转，即点击按钮来实现页面的跳转。在Vue中提供了两种实现方式。Home.vue的代码在前者基础上稍做调整即可，获取方式等代码一样。编程式导航两种跳转方式对于两种传参方式也都支持。跳转方法中通过name属性指定路由即可。2.1.1. 查询参数传参（简写）2.2. name命名路由跳转传参。1.2. name 命名路由跳转。2.1. path路径跳转传参。2.2.1. 查询参数传参。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值