开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

jquery 控制ie全屏

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。IE（Internet Explorer）是微软公司开发的一款网页浏览器，尽管微软公司已停止对其的更新和支持，但在一些旧系统或特定场景下仍需兼容。

全屏模式允许网页内容占据整个屏幕，提供更好的用户体验。不同浏览器对全屏 API 的支持有所不同，IE 的全屏 API 与其他现代浏览器有所差异。

相关优势

简化代码：使用 jQuery 可以减少编写和维护 JavaScript 代码的工作量。
跨浏览器兼容性：jQuery 提供了一些方法来处理不同浏览器之间的差异，使得开发者可以编写一次代码，在多个浏览器中运行。

类型

现代浏览器全屏 API：使用 requestFullscreen 方法。
IE 全屏 API：使用 msRequestFullscreen 方法。

应用场景

视频播放器：在全屏模式下观看视频。
游戏：提供沉浸式的游戏体验。
演示文稿：在演示时全屏显示内容。

遇到的问题及解决方法

问题：为什么在 IE 浏览器中无法实现全屏？

原因： IE 浏览器的全屏 API 与其他现代浏览器不同，需要使用特定的方法 msRequestFullscreen。

解决方法：使用 jQuery 来检测浏览器类型，并调用相应的全屏 API。

$(document).ready(function() {
    $('#fullscreen-button').click(function() {
        var elem = document.documentElement;
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) { /* Firefox */
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
            elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { /* IE/Edge */
            elem.msRequestFullscreen();
        }
    });
});

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Fullscreen Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="fullscreen-button">Go Fullscreen</button>

    <script>
        $(document).ready(function() {
            $('#fullscreen-button').click(function() {
                var elem = document.documentElement;
                if (elem.requestFullscreen) {
                    elem.requestFullscreen();
                } else if (elem.mozRequestFullScreen) { /* Firefox */
                    elem.mozRequestFullScreen();
                } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                    elem.webkitRequestFullscreen();
                } else if (elem.msRequestFullscreen) { /* IE/Edge */
                    elem.msRequestFullscreen();
                }
            });
        });
    </script>
</body>
</html>

总结

通过使用 jQuery 和浏览器特定的全屏 API，可以实现跨浏览器的全屏功能。对于 IE 浏览器，需要使用 msRequestFullscreen 方法来实现全屏效果。通过检测浏览器类型并调用相应的方法，可以确保在不同浏览器中都能正常工作。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS控制全屏，监听退出全屏事件

实现方案 //进入全屏 function requestFullScreen(de) { if(de.requestFullscreen){ //W3C de.requestFullscreen...//FireFox element.mozRequestFullScreen || //Chrome等 element.msRequestFullScreen; //IE11...== null) { wscript.SendKeys("{F11}"); } } } //退出全屏判断浏览器种类 function exitFull(...FireFox document.webkitExitFullscreen || //Chrome等 document.webkitExitFullscreen; //IE11...== null) { wscript.SendKeys("{F11}"); } } } 监听退出全屏事件 //监听退出全屏事件 window.onresize

11.4K3 0

为 IE7、IE8 增加圆角支持的 jQuery 插件：jQuery Corner

但是在国内早期 IE 浏览器仍然盛行的时期，为了考虑到大多数用户，我们不得不通过一些插件之类的来实现圆角，jQuery Corner 就是这样一个插件，使用这个插件配置一下圆角半径等参数，即可生成圆角同时兼容各种早期...IE 浏览器。...另外我们还可以看一下 jQuery Corner 插件的演示，它不仅仅支持生成各种圆角，同时还可以生成一些其他奇怪的“角”，虽然不是很实用，但万一有时候就用上了呢如果你的项目中，需要圆角，同时还需要兼容早期...IE 浏览器，不妨来试用一下吧，下载：jQuery Corner。

7391 0

js实现全屏切换控制 WordPress

前段时间做的几个小项目都加入进去了全屏切换控制按钮，这个过程是怎么实现的呢，其实和暗黑控制切换一样。非常的简单。并且适用于所有网站，WordPress、typecho都不是问题，技术互通。...只待你补充css效果展示图片正文开始#js代码//控制全屏function enterfullscreen() { //进入全屏 $("#fullscreen").html("退出全屏");...Chrome等 else if(docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } //IE11...elem.msRequestFullscreen) { elem.msRequestFullscreen(); }}function exitfullscreen() { //退出全屏...$("#fullscreen").html("切换全屏"); if(document.exitFullscreen) { document.exitFullscreen();

4.4K1 0

jQuery 2.0将不再支持IE 678

版本中废弃的接口，其他一些可能做为插件或者可选API使用，将继续支持IE 6/7/8 jQuery 1.9.x (ongoing in 2013 and beyond): 该版本将持续修复1.9中出现的...bug jQuery 2.0 (early 2013, not long after 1.9): 该版本在API上兼容1.9版本，但不再支持IE 6/7/8 详细的说明请看官方博客：blog.jquery.com...IE 6/7/8 will be supported as today. jQuery 1.9.x (ongoing in 2013 and beyond): This version will continue...: This version will support the same APIs as jQuery 1.9 does, but removes support for IE 6/7/8 oddities...such as borked event model, IE7 “attroperties”, HTML5 shims, etc.

8216 0

jQuery支持mobile的全屏水平横向翻页效果

这是一款支持移动手机mobile设备的 jQuery全屏水平横向翻页效果插件。该翻页插件能够使页面在水平方向上左右全屏翻动，它支持手机触摸屏，支持使用鼠标滚动页面。...在线演示：http://www.htmleaf.com/Demo/201503141519.html 下载地址：http://www.htmleaf.com/jQuery/Layout-Interface

3.7K2 0

jQuery 发布 2.0 版本，不再支持 IE 678

jQuery 2.0 新特性不再支持 IE 6/7/8，如果在 IE9/10 版本中使用“兼容性视图”模式也将会受到影响。...兼容 jQuery 1.9 版本的API。就目前国内来说，早期的 IE 浏览器使用份额还有一些，所以使用 jQuery 2.0 是行不通的。...这些 JS 环境跟老旧 IE 没有什么关系，那么 1.X 的 jQuery 中对老旧浏览器做的兼容就是多余的了，反而会影响效率。...团队保留了 1.X 继续兼容 IE 早期浏览器。...从这里也可以看出 jQuery 团队对 IE 的无语和无奈。

1K3 0

使用Python控制IE访问网站

这里介绍一下怎样利用Python 2.7和Python Win32 Extensions来控制浏览器访问一个网页。...iewindow = win32com.client.DispatchEx('InternetExplorer.Application.1') iewindow.Visible = 1 # 1表示IE...窗口显示，你可以换0试试 iewindow.Navigate(targetURL) # 打开网页 # 在这里做需要做的事情 iewindow.Quit() # 关闭该IE窗口利用Python的...Win32 Extensions来控制浏览器有一个好处，这个新打开的IE窗口的关闭时可以控制的，而且对其他的IE窗口没有影响。

1.4K1 0

JQuery IE下如何阻止keydown事件冒泡

今天凑巧碰到一件怪事: 1.问题描述：根据用户输入的内容按回车键作查询时,在IE下一直会触发一个Button按钮;IE下只有Button才会有这个问题，如果是a标签就不会有这样的问题?...3.举例说明: 1.阻止浏览器的默认行为 function stopDefault(e) { if(e && e.preventDefault) { //如果提供了事件对象，则这是一个非IE...浏览器　　e.preventDefault(); //阻止默认浏览器动作(W3C) } else { //IE中阻止函数器默认动作的方式　　...浏览器　　e.stopPropagation(); //因此它支持W3C的stopPropagation()方法 } else { //否则，我们需要使用IE的方式来取消事件冒泡 ...浏览器　　e.preventDefault(); //阻止默认浏览器动作(W3C) } else { //IE中阻止函数器默认动作的方式

1.6K3 0

分享一款jQuery全屏滚动页面特性案例

分享一款jQuery全屏滚动页面特性案例。我们在来往官网，或者小米官网都会看到全屏滚动页面的一些例子。可以说全屏滚动页面越来越受欢迎。...实现滚屏翻页效果 jquery/1.10.2/jquery.min.js...overflow-y:hidden; _background-image:url(about:blank); _background-attachment:fixed; }/* html加上这段代码用于取消ie6....sideGuide li.on s{ display:block; } .sideGuide li.on a{ background:#f4f4f4; color:#333; } .ie6fixedTL...纵向定位滚屏特效代码,是个人业余兴趣爱好写的，是基于jquery一个特效，没有任何封装，只是提供一种思考方式和实现方法，代码共享可随便使用，可能存在bug，但本人不承担任何修复bug的责任。

4K3 0

IE、Chrome、360浏览器设置开机自启动，自动全屏参数

但是遇到一个问题，每次打开浏览器，还需要手动设置全屏。那么，又有没有什么快速又方便的方法，让浏览器打开自动全屏呢？答案是肯定的，继续往下看。 ?...常用的浏览器内核就是 IE 和 Chrome 浏览器全屏参数： IE： --k 该模式称为 Kiosk Mode ，默认会载入IE首页，没有地址栏没有工具栏，广泛用于各类服务大厅的触屏电脑。...设置自动全屏：以Chrome为例：将桌面上的 Chrome 图标复制一份，右击——属性，在目标一栏添加 --kiosk 参数，如果要打开指定页面，在后面加上网址即可，注意参数之间要有空格隔开。...IE 设置方法相同上。 ? 点击确定，双击打开即可（如果打开仍不是全屏，看看Chrome浏览器窗口是否全部关闭。关闭所有窗口再重新打开就可以了。）...声明：本文由w3h5原创，转载请注明出处：《IE、Chrome、360浏览器设置开机自启动，自动全屏参数》 https://www.w3h5.com/post/442.html

13K2 0

Jquery控制input与selected

使用jquery的$(tag).val()时均可获取值。...removeAttr("disabled"); 2、选中某值如选中第一个option: $(".selector option").eq(0).attr("selected",true); 参考资料用jquery...如何让select选中某值 [问题点数：40分，结帖人yozoh_] jquery操作select详解(取值,设置选中) 推荐资料 HTML 标签的 disabled 属性 HTML <

1.3K1 0

jQuery 发布 1.9 正式版，最后支持 IE 678

jQuery 1.9 是最后支持 IE 6/7/8 的版本 jQuery 1.9 和正在 beta 测试的 2.0 这两个版本，它们的 API 基本上相同，之间的唯一差别就是，jQuery 1.9 还支持...IE 6/7/8 的版本，这是 jQuery 最后一个支持 IE 6/7/8 的版本，从 jQuery 2.0 起，jQuery 将只支持 IE 9+ 及其他支持 HTML5 浏览器。...jQuery 开始从牺牲对老旧 IE 的兼容性，来换取更小的体积和更快的执行效率，现在 IE 6/7/8 的用户也慢慢减少，从我爱水煮鱼的博客的访问用户来看，所有 IE 用户已经低于 30%，其中 IE8...：50%，IE6：10%，IE7：9%，所以总体上 IE 6/7/8 的用户只有 20% 左右。...下载：jQuery | jQuery Migrate ----

6874 0

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了，接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。...我们经常见到一些全屏的特绚丽页面，手指或者鼠标滑动一下就是一整屏切换，而且还有各种效果。比如：全屏滑动案例下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。...1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件，它能很方便的制作出全屏网站，github地址。主要功能有：支持鼠标滚动。支持前后退和键盘控制。...2. fullpage.js的使用 2.1 兼容性 fullpage.js是jQuery的插件，需要依赖jQuery，要求jQuery最低的版本是1.6+。浏览器能兼容到ie8+及其他现代浏览器。...-- 如果是ie8浏览器或者设置了css3: false 那么需要引入jQuery的easing缓动插件，默认可以省略就行了。

5.1K9 0

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了，接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。...我们经常见到一些全屏的特绚丽页面，手指或者鼠标滑动一下就是一整屏切换，而且还有各种效果。比如：全屏滑动案例下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。...1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件，它能很方便的制作出全屏网站，github地址。主要功能有：支持鼠标滚动。支持前后退和键盘控制。...2. fullpage.js的使用 2.1 兼容性 fullpage.js是jQuery的插件，需要依赖jQuery，要求jQuery最低的版本是1.6+。浏览器能兼容到ie8+及其他现代浏览器。...-- 如果是ie8浏览器或者设置了css3: false 那么需要引入jQuery的easing缓动插件，默认可以省略就行了。

5.1K5 0

jQuery控制控件文本的长度

文章作者：Tyan 博客：noahsnail.com | CSDN | 简书在Web项目开发中，有时候会碰到这样一个问题，控件被文本内容撑爆了，但是怎么控制控件文本的的内容呢？...，有时候并不起作用，除非你很精通CSS，否则很难通过CSS控制控件中的文本内容，下面的方法可以解决这个问题。...HTML内容，h2中的文本通过jQuery控制：例如，h2的内容为这是一个测试内容，更多其它内容请查看作者博客！...如果h2控件的样式已由CSS控制，则可以这样做： HTML内容修改，span控件的CSS样式没有被控制： ... jQuery写法为： var str = '这是一个测试内容，更多其它内容请查看作者博客！'

1.3K2 0

使用IE6看老赵的博客——jQuery初探

可能老赵很反感IE6，所以他在自己的博客里面做了点手脚，如果是IE6浏览他的博客的话，那么就会跳转到另一个页面。　　很郁闷，看个博客吗，还要在安装一个浏览器？俺很懒，俺就是想要用IE6看！　　...最近在看jQuery，刚刚入一点门，发现了一个有趣的函数，就拿老赵的博客做实验了，哈。装入一个 HTML 网页最新版本。 ...jQuery 代码: $.ajax({ url: "test.html", cache: false, success: function(html){ $("#results")....代码用IE6看老赵的博客v1.1 jquery/jquery-1.3.1.js" type=...然后IE6里面就可以看到老赵的博客了。 ps：在网站里运行这段代码，居然说“没有权限”。所以就不能在线演示了。

4717 0

jQuery.html()方法ie下不能设置html代码的问题

jQuery一般来说还是很好用的，但有时候它也会有些问题的，比如jQuery的html()方法设置html代码，在一种情况下，ie6、ie7、ie8 下是不能设置html代码的。...本文说的问题只针对ie8（包括ie8）以下的浏览器。　　1.什么情况下IE6、IE7、IE8 jQuery.html("xxx")方法会设置不上html代码？　　...答：当被加载的的html代码里面出现以下情况，ie8（包括ie8）以下是设置不上html代码的：　　　　a) 被设置的html代码中包含引用其他js的，如：<script src="Stone.js"...2.原因分析：　　答：被设置的html，jQuery只是单纯的解析为html，不会去理会其他的因素和代码，所有导致上述问题的出现。

1.9K11 0

js如何动态选择和操作 CSS 伪元素，例如 ::before 和 ::after

而jQuery的选择器都是基于DOM元素的，因此也并不能直接操作伪元素。哪些是伪元素 :first-letter：向文本的第一个字母添加特殊样式。　...::backdrop(处于试验阶段)：用于改变全屏模式下的背景颜色，全屏模式的默认颜色为黑色。（只支持双冒号的形式）。...red; } .green::before { content: "green"; color: green; } // html代码测试测试 // jQuery...::before { content: "red";color: red; }', 0); // 亦可以使用 JQuery: $('.red::before{content: "red"...因为其他两种通过插入行内CSSStyleSheet的方式是在JavaScript中插入字符代码，不利于样式与控制分离；而且字符串拼接易出错。

6.7K2 0

前端技巧——js篇

阻止重复加载 $('#btn').off('click').on('click', function () { // ... }) jQuery平缓滑动至顶部 // 点击返回顶部按钮平缓滑到顶部...id="btn">js控制页面的全屏展示和退出全屏显示这个div的父级下是可以全屏显示的内容 js控制页面的退出全屏显示...Chrome等 element.mozRequestFullScreen || //FireFox element.msRequestFullScreen; //IE11...document.webkitExitFullscreen || //FireFox document.webkitExitFullscreen; //IE11

2K3 0

jQuery控制iframe中对象的方法

jQuery中的$()方法很容易获取到DOM中的元素。但是这个方法不适用于引用iframe中的元素。...b.htm 如果要在a.htm中获得b.htm中的id为default的div，可以使用如下方法： $("#frame").contents().find("#default") 来得到这个div的jQuery...特别需要注意一点，就是iframe中的src一定要使用绝对路径，否则jQuery是无法正确找到对应的元素的。尤其在公网上。之前就因为这个问题，折腾了一晚没解决，换成绝对地址就好了。

2.1K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭