node-webkit播放目录下所有网页文件

1、编写index.html文件

  这里我们需要播放某一个目录下所有的网页文件,要做到切换不同的网页,可以在index.html中使用iframe。通过js动态改变iframe的src属性,从而动态地切换显示的网页。index.html代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>play file</title>
 5 <script  src="script.js"></script><!-- 这是引入的js外部文件 -->
 6   </head>
 7   <body>
 8     <h1>paly all file!</h1>
 9    <iframe id="showwin"  frameborder="0"  scrolling="no" width="100%" height="100%" ></iframe> 
10   </body>
11 </html>

2、编写js代码进行遍历

  在node-webkit中我们可是很方便地使用到node.js进行文件遍历,我们只需写一行var fs = require('fs');即可是用node.js提供的函数进行遍历。我们将所有的js代码放在外部的script.js文件中,然后在index.html文件引入即可。script.js代码如下:

 1 var fs = require('fs');//
 2 var second = 1000;//播放间隔时间
 3 var paths = "C:/Users/user/Desktop/dome/source"; //指定要播放的目录
 4 var fileList =  new Array(); //存放要播放的文件
 5 var page; //iframe
 6 window.onload = function (){      
 7     page = document.getElementById("showwin"); 
 8     findfile(paths);//解析目录,将所有网页文件的路径找出并存放在fileList数组里面
 9     start(); 
10 }
11 
12 //get the file path
13 function findfile(filepaths){ 
14     var dirList = fs.readdirSync(filepaths);
15         dirList.forEach(function(item){    
16             if(fs.statSync(filepaths + '/' + item).isFile()){//是文件则放入数组
17                  if(item.indexOf(".html") != -1)//只将网页文件路径放入数组
18                     fileList.push(filepaths + '/' + item);
19             }
20             else if(fs.statSync(filepaths + '/' + item).isDirectory()){//是目录,继续遍历
21                 findfile(filepaths + '/' + item);
22             }  
23         }); 
24 }
25 
26 //播放网页
27 var m = 0;
28 function show(){        
29     page.src = fileList[m]; 
30     if (m == fileList.length - 1)
31         m = 0;
32     else 
33         m++;    
34 }
35 
36 //开始播放
37 function start(){
38     time = window.setInterval("show()", second);//没隔一秒播放一个网页
39 } 

3、编写package.json文件

  package.json文件代码如下:

 1 {
 2   "name": "nw-demo",
 3   "main": "index.html",
 4   "window": {
 5     "frame": false,
 6     "width": 500,
 7     "height": 500,
 8     "toolbar": false,
 9     "position": "center",
10     "resizable": false,
11     "kiosk":true
12   }
13 }

  其中frame:false表示播放的时候,窗口的框架不显示。toolbar:false表示播放的时候,地址栏不显示。resizable:false表示播放的时候,窗口大小不能改变。kiosk:true表示播放的时候全屏。

4、运行,将这三个文件直接压缩成zip文件(这三个文件都是在zip文件的根目录下),script.js中地三行制定好要要播放的网页文件的目录。将zip文件改名成dome.nw,再将dome.nw拖入nw.exe即可运行,运行界面如下:

  

posted on 2013-12-16 13:35  烟火_  阅读(825)  评论(0编辑  收藏  举报

导航