老铁们，大家好，相信还有很多朋友对于谷歌浏览器下js全屏和谷歌浏览器下js全屏设置的相关问题不太懂，没关系，今天就由我来为大家分享分享谷歌浏览器下js全屏以及谷歌浏览器下js全屏设置的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！

本文目录

1. chrome浏览器屏蔽了js代码的执行
2. NW.js是什么如何使用
3. 前端开发中常用到的js特效有哪些

一、chrome浏览器屏蔽了js代码的执行

只要重新启用即可。操作方法和步骤如下：

1、首先，打开Chrome浏览器的“设置”选项，如下图所示。

2、其次，完成上述步骤后，拉到底部，单击“高级”按钮，如下图所示。

3、接着，完成上述步骤后，单击“网站设置”选项，如下图所示。

4、然后，完成上述步骤后，单击“ JavaScript”选项，如下图所示。

5、最后，单击“允许（推荐）”按钮，如下图所示。这样，就不会屏蔽js代码的执行了，问题解决了。

二、NW.js是什么如何使用

本文主要和大家分享NW.js是什么如何使用？NW.js（原名 node-webkit）是一个基于 Chromium和 node.js的应用运行时，通过它可以用 HTML和 JavaScript编写原生应用程序。它还允许您从 DOM调用 Node.js的模块，实现了一个用所有 Web技术来写原生应用程序的新的开发模式。

（1）以网络最流行的技术编写原生应用程序的新方法

（2）基于HTML5, CSS3, JS and WebGL而编写

（3）完全支持nodejs所有api及第三方模块

（4）可以使用DOM直接调用nodejs模块

（6）支持运行环境包括32位和64位的Window、Linux和Mac OS

1.下载 NW.js（官网：）

这里面normal这个算是运行时吧，sdk那个是一些工具箱，建议都下下来~

2.下载 Enigma Virtual Box（官网：）

"description":"使用nw.js封装的一个微信公众号菜单编辑器App",

"keywords": ["微信","菜单编辑器" ],

"icon":"app/static/img/weixin_logo.jpg",

"chromium-args":"-allow-file-access-from-files"

}title:字符串，设置默认 title。

toolbar: bool值。是否显示导航栏。

position:字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。

min_width/min_height:窗口的最小值。

max_width/max_height:窗口显示的最大值。

resizable: bool值。是否允许调整窗口大小。

always-on-top: bool值。窗口置顶。

fullscreen: bool值。是否全屏显示。

show_in_taskbar:是否在任务栏显示图标。

frame: bool值。如果设置为 false，程序将无边框显示。

"chromium-args":"-allow-file-access-from-files"相当于给谷歌浏览器添加启动参数一样，这行代码允许angularjs直接访问本地json文件。

将html项目压缩成zip，并改名为nw,输入以下命令

copy/b nw.exe+app.nw firstApp.exe四、打发包发布

打开 Enigma Virtual Box程序（enigmavb.exe），界面应该是这样的：

然后在 Enter Input File Name处选择上一步生成的 test.exe文件，Enter Output Name可以默认；

之后再点击下面的 Add按钮，将 nwjs文件夹（名称不一定是 nwjs，就是最开始第一步 NW.js环境的那个文件夹）下除 nw.exe和 test.nw以及 test.exe之外的所有文件加载上，然后点击 Process，等待执行成功即可，这时候会在相应的路径下生成一个新的.exe文件（我们暂且叫做 newtest.exe），此时的 newtest.exe文件即可在任意的 Windows环境下运行了，你可以拷贝给你的小伙伴去 Show一下。

1.如果只希望当前应用获取焦点才执行快捷键，看看这个库用js设置快捷键

var gui= require('nw.gui');

alert("全局快捷键"+ this.key+"按下");

var shortcut= new gui.Shortcut(option);

gui.App.registerGlobalHotKey(shortcut);

//解除注册，在应用结束的时候执行

gui.App.unregisterGlobalHotKey(shortcut);2.nw.js不能对页面多次刷新，各种不正常，这是由于刷新页面后重新加载js文件对变量重新赋值引起的bug。解决方案

<title>nw.js实现文件读写</title>

<input id="readFile" type="file">读取文件</input>

<!--默认文件名为filename.html-->

<input id="writeFile" nwsaveas="filename.html" type="file">保存文件</input>

var chooser= document.querySelector('#readFile');

chooser.addEventListener("change", function(evt){

var filePath= this.value.toString();

document.querySelector("p").innerHTML="读取文件从"+ filePath;

fs.readFile(filePath, function(err, data){

layer.msg("读取文件失败!:"+ err.message);

chooser= document.querySelector('#writeFile');

chooser.addEventListener("change", function(evt){

var filePath= this.value.toString();

document.querySelector("p").innerHTML="写入文件到："+ filePath;

fs.writeFile(filePath,"Hello!\n", function(err){

</html>3.使用nwjs的'fs'直接保存cancas为本地图片，在网上找到的方法都是弹出选择框保存，但我需要直接保存图片到指定路径，不能弹出对话框让用户选择。kailniris给了一个解决方案，可行，代码如下：

var fs= require('fs');

var c= document.getElementById("myCanvas");

<canvas id="myCanvas" width="200" height="100" style="border:1px solid#000000;">

base64Data= c.toDataURL("image/png").replace(/^data:image\/png;base64,/,"")

fs.writeFile("c:/Dev/test.png", base64Data,'base64', function(err){

return res.json({'status':'success'});

});用html2canvas把html页面转换为图片，再把图片保存到本地。贴一下代码（需要导入html2canvas.js和jquery）：

var filePath= templateDir+ filename+'.html';

var editerDocument= window.editor.edit.iframe.get().contentWindow.document;

html2canvas(editerDocument.body,{

onrendered: function(canvas){

var base64Data= canvas.toDataURL("image/png").replace(/^data:image\/png;base64,/,"")

fs.writeFile(templateDir+ filename+'.png', base64Data,'base64', function(err){

$('#model_template_name').modal("hide");

layer.msg("模板已保存为"+ filename);

});4.在app.js里引用Node内置模块

$scope.fs= require('fs');

$scope.readConfig= function(){

var configStr=$scope.fs.readFileSync(config.weixin.path,'utf8');

var obj= eval('('+ configStr+')');

$scope.weixin.appid= obj.appid;

$scope.weixin.appsecret= obj.appsecret;

$scope.weixin.qrcodeurl= obj.qrcodeurl;

alert("读取微信配置文件失败");

$scope.writeConfig= function(){

var configStr= JSON.stringify($scope.weixin);

$scope.fs.writeFileSync(config.weixin.path, configStr,{encoding:'utf8'});

alert("写入微信配置文件失败");

$scope.wechatApi= require('wechat-api');

var api= new$scope.wechatApi($scope.weixin.appid,$scope.weixin.appsecret);

api.getMenu(function(err, result){

$scope.$apply();//需要手动刷新

三、前端开发中常用到的js特效有哪些

// querySelector()返回匹配到的第一个元素var item= document.querySelector('.item');console.log(item);// querySelectorAll()返回匹配到的所有元素，是一个nodeList集合var items= document.querySelectorAll('.item');console.log(items[0]);1234567

//原生jsdocument.getElementById('btn').addEventListener('click', function(event){ event= event|| window.event； if(event.preventDefault){// w3c方法阻止默认行为

}, false);// jQuery$('#btn').on('click', function(event){ event.preventDefault();

//原生jsdocument.getElementById('btn').addEventListener('click', function(event){ event= event|| window.event； if(event.stopPropagation){// w3c方法阻止冒泡

}, false);// jQuery$('#btn').on('click', function(event){ event.stopPropagation();

$('#content').on("mousewheel DOMMouseScroll", function(event){

var delta=(event.originalEvent.wheelDelta&&(event.originalEvent.wheelDelta> 0? 1:-1))||(event.originalEvent.detail&&(event.originalEvent.detail> 0?-1: 1));

console.log('mousewheel top');

} else if(delta< 0){//向下滚动

console.log('mousewheel bottom');

var SVG_NS=';; return!!document.createElementNS&&!!document.createElementNS(SVG_NS,'svg').createSVGRect;

//测试console.log(isSupportSVG());1234567

if(document.createElement('canvas').getContext){ return true;

}//测试，打开谷歌浏览器控制台查看结果console.log(isSupportCanvas());12345678910

var ua= navigator.userAgent.toLowerCase();

if(ua.match(/MicroMessenger/i)=="micromessenger"){

}//测试alert(isWeiXinClient());1234567891011

$('#myImage').click(function(event){

console.log('X：'+ event.offsetX+'\n Y:'+ event.offsetY);

console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);

<!-- dom--><input id="send" type="button" value="发送验证码">12

//原生js版本var times= 60,//临时设为60秒

document.getElementById('send').onclick= function(){

timer= setInterval(function(){

send.value='发送验证码';

send.value= times+'秒后重试';

}1234567891011121314151617181920

$('#send').on('click', function(){

timer= setInterval(function(){

$this.val('发送验证码');

$this.attr('disabled', false);

$this.val(times+'秒后重试');

$this.attr('disabled', true);

});12345678910111213141516171819202122

/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/

/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/

/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/

//匹配双字节字符(包括汉字在内)

/[^\x00-\xff]/1234567891011121314151617181920

var y= now.getFullYear(); var m= now.getMonth()+ 1;//注意js里的月要加1

var d= now.getDate(); var h= now.getHours();

var s= now.getSeconds(); return y+"-"+ m+"-"+ d+""+ h+":"+ m+":"+ s;

var nowDate= new Date(2016, 5, 13, 19, 18, 30, 20);

console.log(nowDate.getTime());//获得当前毫秒数: 1465816710020console.log(formatDate(nowDate));123456789101112131415

js限定字符数（注意：一个汉字算2个字符）

<input id="txt" type="text">//字符串截取function getByteVal(val, max){

var returnValue=''; var byteValLen= 0; for(var i= 0; i< val.length; i++){ if(val[i].match(/[^\x00-\xff]/ig)!= null) byteValLen+= 2; else byteValLen+= 1; if(byteValLen> max) break;

$('#txt').on('keyup', function(){

var val= this.value; if(val.replace(/[^\x00-\xff]/g,"**").length> 14){ this.value= getByteVal(val, 14);

});12345678910111213141516171819

trident: u.indexOf('Trident')>-1,//IE内核

presto: u.indexOf('Presto')>-1,//opera内核

webKit: u.indexOf('AppleWebKit')>-1,//苹果、谷歌内核

gecko: u.indexOf('Firefox')>-1,//火狐内核Gecko

mobile:!!u.match(/AppleWebKit.*Mobile.*/),//是否为移动终端

ios:!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),//ios

android: u.indexOf('Android')>-1|| u.indexOf('Linux')>-1,//android

iPhone: u.indexOf('iPhone')>-1,//iPhone

iPad: u.indexOf('iPad')>-1,//iPad

webApp: u.indexOf('Safari')>-1//Safari

if(browser.versions.mobile()|| browser.versions.ios()|| browser.versions.android()|| browser.versions.iPhone()|| browser.versions.iPad()){

}123456789101112131415161718192021

之前我用过一个检测客户端的库觉得挺好用的，也推荐给大家叫 device.js，大家可以 Googel或百度

GItHub仓库地址：

getBoundingClientRect()获取元素位置

//它返回一个对象，其中包含了left、right、top、bottom四个属性var myDiv= document.getElementById('myDiv');var x= myDiv.getBoundingClientRect().left;

var y= myDiv.getBoundingClientRect().top;

//相当于jquery的：$(this).offset().left、$(this).offset().top// js的：this.offsetLeft、this.offsetTop123456

if(element.requestFullscreen){

} else if(element.mozRequestFullScreen){

element.mozRequestFullScreen();

} else if(element.webkitRequestFullscreen){

element.webkitRequestFullscreen();

} else if(element.msRequestFullscreen){

element.msRequestFullscreen();

fullscreen(document.documentElement);12345678910111213

好了，关于谷歌浏览器下js全屏和谷歌浏览器下js全屏设置的问题到这里结束啦，希望可以解决您的问题哈！