大家好，今天给各位分享谷歌浏览器读取本地json的一些知识，其中也会对谷歌浏览器读取本地文件权限设置在哪里进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！

本文目录

1. 谷歌浏览器Chrome58正式版将具有哪些新特征
2. NW.js是什么如何使用
3. 谷歌浏览器怎么安装json视图插件

一、谷歌浏览器Chrome58正式版将具有哪些新特征

尽管谷歌浏览器Chrome58正式版尚未正式发布，但其测试版已经发布，并提供免费下载和使用，从测试版来看，Chrome58将会有较大的变化和改进，具体有哪些呢？我们来看。

58版Chrome将支持 IndexedDB 2.0

IndexedDB的技术特点是，不需要你去写特定的sql语句来对数据进行操作，它是nosql的，数据形式使用的是json。它是HTML5本地存储的一种技术，本地存储这个概念想必大家都已经有所了解了，就是把一些数据存储到浏览器中，当与网络断开时，可以从浏览器中读取数据，用来做一些离线应用。

网站里有广告内容是再常见不过的事情，而且，很多广告内容是来自第三方网站的，这些广告代码的安全性就比较难以保证了，而使用Chrome 58现在支持新的 iframe沙盒关键字 allow-top-navigation-by-user-activation，可以防止这些代码访问顶级导航页面，并阻止自动重定向。

安卓版Chrome58提供Progressive Web App沉浸式体验

当我们在安卓系统上使用Progressive Web App时，会自动隐藏非必要元素，这样可以提供更多的屏幕空间，且不被不必要的元素打扰，并且新版中还提供全屏模式参数。

谷歌浏览器Chrome58测试版还有以下重大升级和改变，根据 Chrome针对一些重要功能的政策，使用 Notifications API请求通知权限或创建非永久本地通知时，网站必须使用 HTTPS；现在 Chrome（Mac版）支持 PointerEvent.tangentialPressure和PointerEvent.twist属性，可为触控笔设备和绘画应用提供更多信息。

二、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();//需要手动刷新

三、谷歌浏览器怎么安装json视图插件

如今很多开发者在前后台分离情况下都用json数据交互信息，开发者通常用浏览器访问api显示json数据，但是通常默认情况下json在浏览器上的可读性较差。此教程插件可以让开发者提高开发效率。

2、打开谷歌浏览器的左上角菜单键--更多工具--扩展程序。就会到扩展程序界面

3、然后把下载好的插件，直接拖拽到扩展程序界面，会提示安装插件，安装成功后点击启用插件，如图：

4、启用插件后，我们的插件会自动检查当前显示的数据是否是json，我们可以对比下，下面的第一张图是没有插件的显示情况，第二张图是有插件的显示效果。

5、如果大家在用了插件后，有的时候想看下普通视图，大家点击页面右上角的viewsource就可以查看没用插件的结果视图了，我相信这个插件能给很多开发者溢处，主要能提高工作效率啊！

关于谷歌浏览器读取本地json，谷歌浏览器读取本地文件权限设置在哪里的介绍到此结束，希望对大家有所帮助。