JS实现浏览器菜单命令

序：用js实现菜单命令虽然在技术上讲没什么，不过这个算是比较全了。

每当我们看到别人网页上的打开、打印、前进、另存为、后退、关闭本窗口、禁用右键等实现浏览器命令的链接，而自己苦于不能实现时，是不是感到很遗憾？是不是也想实现？如果能在网页上能实现浏览器的命令，将是多么有意思的事啊！下面我们就来看看如何用Javascript代码实现浏览器菜单命令(以下代码在Windows XP下的浏览器中调试通过)。

一、【文件(F)】菜单中的命令的实现

　　1、〖打开〗命令的实现

　　[格式]:document.execCommand("open")
　　[说明]这跟VB等编程设计中的webbrowser控件中的命令有些相似，大家也可依此琢磨琢磨。
　　[举例]在<body></body>之间加入：
　　<a href="#" onclick=document.execCommand("open")>打开</a>

　　2、〖使用 记事本 编辑〗命令的实现

　　[格式]:location.replace("view-source:"+location)
　　[说明]打开记事本，在记事本中显示该网页的源代码。
　　[举例]在<body></body>之间加入：
　　<a href="#" onclick=location.replace("view-source:"+location)>使用 记事本 编辑</a>

　　3、〖另存为〗命令的实现

　　[格式]:document.execCommand("saveAs")
　　[说明]将该网页保存到本地盘的其它目录！
　　[举例]在<body></body>之间加入：
　　<a href="#" onclick=document.execCommand("saveAs")>另存为</a>

　　4、〖打印〗命令的实现

　　[格式]:document.execCommand("print")
　　[说明]当然，你必须装了打印机！
　　[举例]在<body></body>之间加入：
　　<a href="#" onclick=document.execCommand("print")>打印</a>

　　5、〖关闭〗命令的实现

　　[格式]:window.close();return false
　　[说明]将关闭本窗口。
　　[举例]在<body></body>之间加入：
　　<a href="#" onclick=window.close();return false)>关闭本窗口</a>

二、【编辑(E)】菜单中的命令的实现

　　〖全选〗命令的实现 
　　[格式]:document.execCommand("selectAll")
　　[说明]将选种网页中的全部内容！
　　[举例]在<body></body>之间加入：
　　<a href="#" onclick=document.execCommand("selectAll")>全选</a>

三、【查看(V)】菜单中的命令的实现

　　1、〖刷新〗命令的实现

　　[格式]:location.reload() 或 history.go(0)
　　[说明]浏览器重新打开本页。
　　[举例]在<body></body>之间加入：
　　<a href="#" onclick=location.reload()>刷新</a>
　　或加入:<a href="#" onclick=history.go(0)>刷新</a>

　　2、〖源文件〗命令的实现

　　[格式]:location.replace("view-source:"+location)
　　[说明]查看该网页的源代码。
　　[举例]在<body></body>之间加入：
　　<a href="#" onclick=location.replace("view-source:"+location)>查看源文件</a>

　　3、〖全屏显示〗命令的实现

　　[格式]:window.open(document.location,"url","fullscreen")
　　[说明]全屏显示本页。
　　[举例]在<body></body>之间加入：
　　<a href="#" onclick=window.open(document.location,"url","fullscreen")>全屏显示</a>

四、【收藏(A)】菜单中的命令的实现

　　1、〖添加到收藏夹〗命令的实现

　　[格式]:window.external.AddFavorite('url', '“网站名”)
　　[说明]将本页添加到收藏夹。
　　[举例]在<body></body>之间加入：
　　<a href="javascript:window.external.AddFavorite('http://oh.jilinfarm.com', '胡明新的个人主页')">添加到收藏夹</a>

　　2、〖整理收藏夹〗命令的实现

　　[格式]:window.external.showBrowserUI("OrganizeFavorites",null)
　　[说明]打开整理收藏夹对话框。
　　[举例]在<body></body>之间加入：
　　<a href="#" onclick=window.external.showBrowserUI("OrganizeFavorites",null)>整理收藏夹</a>

五、【工具(T)】菜单中的命令的实现

　　〖internet选项〗命令的实现

　　[格式]:window.external.showBrowserUI("PrivacySettings",null)
　　[说明]打开internet选项对话框。
　　[举例]在<body></body>之间加入：
　　<a href="#" onclick=window.external.showBrowserUI("PrivacySettings",null)>internet选项</a>

六、【工具栏】中的命令的实现

　　1、〖前进〗命令的实现

　　[格式]history.go(1) 或 history.forward()
　　[说明]浏览器打开后一个页面。
　　[举例]在<body></body>之间加入：
　　<a href="#" onclick=history.go(1)>前进</a>
　　或加入:<a href="#" onclick=history.forward()>前进</a>

　　2、〖后退〗命令的实现

　　[格式]:history.go(-1) 或 history.back()
　　[说明]浏览器返回上一个已浏览的页面。
　　[举例]在<body></body>之间加入：
　　<a href="#" onclick=history.go(-1)>后退</a>
　　或加入:<a href="#" onclick=history.back()>后退</a>

　　3、〖刷新〗命令的实现

　　[格式]:document.reload() 或 history.go(0)
　　[说明]浏览器重新打开本页。
　　[举例]在<body></body>之间加入：
　　<a href="#" onclick=location.reload()>刷新</a>
　　或加入:<a href="#" onclick=history.go(0)>刷新</a>

七、其它命令的实现

　　〖定时关闭本窗口〗命令的实现 
　　[格式]:settimeout(window.close(),关闭的时间)
　　[说明]将关闭本窗口。
　　[举例]在<body></body>之间加入：
　　<a href="#" onclick=setTimeout(window.close(),3000)>3秒关闭本窗口</a>

赞 (0)

相关推荐

  • JS实现浏览器菜单命令

    序:用js实现菜单命令虽然在技术上讲没什么,不过这个算是比较全了. 每当我们看到别人网页上的打开.打印.前进.另存为.后退.关闭本窗口.禁用右键等实现浏览器命令的链接,而自己苦于不能实现时,是不是感到很遗憾?是不是也想实现?如果能在网页上能实现浏览器的命令,将是多么有意思的事啊!下面我们就来看看如何用Javascript代码实现浏览器菜单命令(以下代码在Windows XP下的浏览器中调试通过). 一.[文件(F)]菜单中的命令的实现 1.[打开]命令的实现 [格式]:document.exec

  • JS实现多级菜单中当前菜单不随页面跳转样式而发生变化

    JS实现多级菜单中当前菜单不随页面跳转样式而发生变化

    一.概述 本文介绍了JQuery巧妙实现多级菜单中当前菜单不随页面跳转样式发生变化,貌似没看懂啥意思? 看图说话:就是点二级或多级菜单时,父级展开,当前菜单是被选中状态,这下明白了吧? 二.应用场景 当一个项目使用公共模板文件时(如上图的左侧菜单栏),我们给每个子菜单添加链接时,点击页面跳转样后还是公共模板的样式,这时就需要实现动态加载当前菜单的样式. 三.实现方法 第一种:.通过php传递变量,模板页面通过接收这些变量来实现当前页面的菜单选中与否,父级展开等这些样式 缺点:虽然实现简单,但是每

  • JS判断浏览器是否安装flash插件的简单方法

    JS判断浏览器是否安装flash插件的简单方法

    1. 直接判断是否有flash插件 var myFlash = (function(){ if(typeof window.ActiveXObject != "undefined"){ return new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); }else{ return navigator.plugins['Shockwave Flash']; } })(); chrome: Edge浏览器中取消了wind

  • Node.js中npm常用命令大全

    Node.js中npm常用命令大全

    npm是什么 NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载.安装.上传以及管理已经安装的包. npm install 安装模块 基础语法 npm install (with no args, in package dir) npm install [<@scope>/]<name> npm install [<@scope>/]<name>@<tag>

  • js调出上下文菜单的实例

    本文实例讲述了js调出上下文菜单的实例代码,分享给大家供大家参考,具体如下: 原理 当用户点击右键时会触发一个contextmenu事件,默认会触发浏览器的默认的上下文菜单,通过手动阻止这个默认行为,然后再显示自定义的上下文菜单,当用户单击时隐藏这个菜单即可. 代码 1.html <div id="box" style="color:red;width: 100%;height:1000px;" > <div id="left"

  • 用Vue.js在浏览器中实现裁剪图像功能

    你是否写了一个需要接受用户上传图片的 Web 应用,后来才意识到用户总是提供各种形状和大小的图像来破坏你的网站主题?在网络上处理图像很容易成为一种痛苦 -- 当然,除非你使用了正确的工具. 在本教程中,我们将探讨如何在浏览器中使用 JavaScript 库来操作图片,为服务器上的存储做准备,并在 Web 程序中使用.我们将使用 Vue.js 而不是原生 JavaScript来完成此操作. 要了本文想要完成的任务,请查看上面的图片.左侧是原始图像,右侧是新图像预览.我们可以移动裁剪框并调整其大小,

  • 原生js自定义右键菜单

    本文实例为大家分享了js自定义右键菜单的具体代码,供大家参考,具体内容如下 1.右键菜单触发的基本过程 实现自定义右键菜单我们首先需要了解以下内容: 浏览器默认的右键菜单触发的基本过程 1).单击右键,菜单出现 2).菜单出现,鼠标箭头一直在菜单左上角 3).再换个位置点击右键,原菜单消失,新菜单出现在指定位置 4).点击左键,中键,菜单消失 以上为大致实现过程,不全面,仅供参考 也许文字过于抽象,我们来看看代码吧: 2.HTML结构 <!--start右键菜单的结构--> <div i

  • JS判断浏览器类型与版本的实现代码

    在众多的浏览器产品中,IE.Firefox.Opera.Safari........众多品牌却标准不一,因此时常需要根据不同的浏览器,甚至相同浏览器不同版本做不同的操作,因此,知晓浏览器的判断方法,还是很重要的.下面列举一下常用的判断方法 1.判断浏览器是否为IE document.all ? 'IE' : 'others':在IE下document.all值为1,而其他浏览器下的值为0: navigator.userAgent.indexOf("MSIE")>0 ? 'IE'

  • JS区分浏览器页面是刷新还是关闭

    Web开发者在系统开发中经常要面对产品经理各式各样的需求,当然,大部分对产品体验还是有帮助的,例如我们今天提到的刷新页面,前进后退,关闭浏览器标签时,为了避免用户误操作,需给出二次确认提示框,这个相信大家都非常熟悉了,采用浏览器提供的BOM事件机制就可以解决,使用window对象的onbeforeunload事件即可,如果产品经理只提出这样的需求,那确实无可厚非,然而其需要的不仅仅是这些... 例如,我们一次项目开发中,产品经理就针对我们的实现提出了"改进方案": 你们这弹出框太丑了,

  • js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

    js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

    如下所示: screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去除状态栏后的屏幕高度 一.通过浏览器获得屏幕的尺寸 二.获取浏览器窗口内容的尺寸 //高度 window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight //宽度 window.innerWidth

随机推荐