帮酷LOGO
0 0 评论
文章标签:PRE  预览  
image, 103 kb
本文中介绍的实际HTML预览的屏幕截图

什么是HTML预览

HTML预览是一个回答需求需要几年时间的工具,因为我开始在硬盘上存储大量HTML档案。 我的问题很可能是你 如何在没有双击每个条目的情况下预览HTML页面,从而等待 IE 呈现它。

令人惊讶的是,在互联网上,你有数百万的图像缩略图 sharewares,但是没有一个工具可以自动构建。

那就在那里吧。

使用HTML预览

你可以在阅读本文的其余部分之前,通过执行以下操作来使用提供的HTML源代码。 下载 htmlpreview.html 后:
  • 在目标文件夹中复制这里文件
  • 你当然需要html页面来玩
  • 双击它
  • 当 IE 询问是否应该运行ActiveX脚本时回答是
  • 只看 !

从头开始构建HTML预览

故事从 Windows Explorer 网站文件夹功能开始。 你知道,在几天之后,任何人都禁用了这个空间,这显示了一个图片的缩放视图。 就像大家肯定的那样,这个特性充满了 HTML behind。 阅读 this MS文章了解更多信息。 也就是说,当激活web文件夹时,操作系统会查找 <用户配置文件> folder.htt 文件或者默认 <windowsdir> webfolder.htt 文件。 这个. htt 文件实际上是简单的HTML,带有ActiveX脚本 inside (。请记住在你的Internet配置面板中启用ActiveX脚本)。

我做了一些实际的ActiveX组件,构建一个图片或者文档预览,然后将一些应用逻辑反映在输出中。

below 是这里ActiveX的关键数据:

  • ActiveX友好名称:ThumbCl类

  • CLSID: 1 D2B4F40-1F10-11D1-9E88-00C04FDCAB92

  • 已经启用自动化

  • 公开的方法:

    HRESULT displayFile([IN] BSTR filepath)
    HRESULT haveThumbnail([OUT] BOOL *bThumbnail)
  • 公开的属性:

    [propget] HRESULT freeSpace(/* [retval][out] */long *);
    [propget] HRESULT usedSpace(/* [retval][out] */long *);
    [propget] HRESULT totalSpace(/* [retval][out] */long *);
当然,就像任何人猜测的那样,惟一值得提及的方法是 displayFile (。[IN] BSTR文件文件)。 它使用在 HTML <对象中声明的客户端区域。 用于渲染所传递文件预览的> 标记。
实际上,在HTML中,这是简单的代码,如下所示:
<table><tr><td><objectid=Thumbnail_0classid="clsid:1D2B4F40-1F10-11D1-9E88-00C04FDCAB92"width=120 height=100></object></td><td>&nbsp;</td></tr></table><script> function Init_0()
 {
 Thumbnail_0.displayFile( 'D:new_stuffcodeproject_homepage.htm' )
 }</script>
现在很简单了。现在让我们把它放在 true的Javascript代码中。 为此,我们假定以下( 让事情变得更简单):
  • 我们有一个名为fc的文件枚举器来浏览当前文件夹的所有文件。
    fc.item()
    返回当前文件,fc.moveNext() 切换到下一个。
  • 我们正在处理一个变量 curdir,它保存正在预览的当前文件夹。
  • thisfilename = htmlpreview.html
用于预览所有 *.htm(l) 页面的Javascript代码如下所示:
<script language="javascript">// purpose : use directory file enumerator to list all *.htm* files// and prepare a table cell to preview it using the preview ActiveX// put the following line in comment if you don't want scalingvar imgsize = " width=160 height=140";var clsid = " classid='clsid:1D2B4F40-1F10-11D1-9E88-00C04FDCAB92'";var fso = new ActiveXObject("Scripting.FileSystemObject"), f, fc;
f = fso.GetFolder(curdir);
fc = new Enumerator(f.files); 
s = "";
sf = "<script language="'javascript'"> function Init() {";
i = 0;for (;!fc.atEnd(); fc.moveNext())
{
 // create an ActiveX instance for the preview of this html file name = "Thumbnail"+i
 s = "<object id=" + name + clsid + imgsize + "></"+"object>";
 if (fc.item().Name.indexOf(".htm",0)>-1 && fc.item().Name!=thisfilename)
 {
 // and add an hyperlink to play with s = "<a href='"+fc.item().Name+"'>" + s + "</a>";
 document.write(s);
 // attach initialisation code to it//. replace(//g,"") replaces simple backslashes with // double-backslashes s = name + 
 ".displayFile( '" + fc.item().Path.replace(//g, "") + "');";
 sf += s;
 i++;
 }
}
sf += "} </"+ "script>";
document.writeln(sf);
</script>
再次抱歉,那些不讲Javascript的人。

现在,在提供完全未审查的清单之前,让我们讨论最初的步骤: 双击任何文件夹中的htmlpreview.html 时,我们从检索 htmlpreview.html,的完全合格路径( 例如 c: 文档和设置管理员) 开始,而不是只获取与以下内容相同的文档:

var fullpath = location.href;
因为javascript是跨平台的,所以我们宁愿得到 file:///c:/Documents%20and%20Settings/Administrator/My%20Documents/htmlpreview.html的形式,因此返回一个兼容的URI。
我们删除,删除,替换一些内容,以准备在呈现 htmlpreview.html 时对web浏览器有意义的uri。 这就是你将看到以下代码的原因:
<script language="javascript">
 var fullpath, curdir, thisfilename;
 fullpath = location.href; // fully qualified filepath // of the form"file:///c:/Documents%20and%20Settings/Administrator/// My%20Documents/htmlpreview.html"// regexp weirdo fullpath = fullpath.replace(/file:////,"");//remove file:/// fullpath = fullpath.replace(///g,"");//replace slash with backslash // (for use on Windows OS) fullpath = fullpath.replace(/%20/g,""); // replace escaped space// split path and filenamevar iLastBackslash = fullpath.lastIndexOf("");
 // = htmlpreview.htmlvar thisfilename = fullpath.substring( iLastBackslash+1, fullpath.length); 
 // remove filename from full path, we are just interested in the pathvar curdir = fullpath.substring( 0, iLastBackslash );
</script>
好的,现在列出 htmlpreview.html的完整列表:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><HTML><HEAD><TITLE> HTML Preview </TITLE></HEAD><BODYBGCOLOR="#FFFFFF"onload="Init()"><scriptlanguage="javascript">var fullpath, curdir, thisfilename;
 fullpath = location.href; // fully qualified filepath // of the form"file:///c:/Documents%20and%20Settings/Administrator/// My%20Documents/htmlpreview.html"// regexp weirdo fullpath = fullpath.replace(/file:////,"");//remove file:/// fullpath = fullpath.replace(///g,"");//replace slash with backslash //(for use on Windows OS) fullpath = fullpath.replace(/%20/g,""); // replace escaped space// split path and filenamevar iLastBackslash = fullpath.lastIndexOf("");
 // = htmlpreview.htmlvar thisfilename = fullpath.substring( iLastBackslash+1, fullpath.length); 
 // remove filename from full path, we are just interested in the pathvar curdir = fullpath.substring( 0, iLastBackslash );
 // purpose : use directory file enumerator to list all *.htm* files// and prepare a table cell to preview it using the preview ActiveX// put the following line in comment if you don't want scalingvar imgsize = " width=160 height=140";
 var clsid = " classid='clsid:1D2B4F40-1F10-11D1-9E88-00C04FDCAB92'";
 var fso = new ActiveXObject("Scripting.FileSystemObject"), f, fc;
 f = fso.GetFolder(curdir);
 fc = new Enumerator(f.files); 
 s = "";
 sf = "<script language="'javascript'"> function Init() {";
 i = 0;
 for (;!fc.atEnd(); fc.moveNext())
 {
 // create an ActiveX instance for the preview of this html file name = "Thumbnail"+i
 s = "<object id=" + name + clsid + imgsize + "></"+"object>";
 if (fc.item().Name.indexOf(".htm",0)>-1 && fc.item().Name!=thisfilename)
 {
 // and add an hyperlink to play with s = "<a href='"+fc.item().Name+"'>" + s + "</a>";
 document.write(s);
 // attach initialisation code to it//. replace(//g,"") replaces simple backslashes with double-backslashes s = name + ".displayFile( '" + fc.item().Path.replace(//g, "") + "');";
 sf += s;
 i++;
 }
 }
 sf += "} </"+ "script>";
 document.writeln(sf);</script>
我们在生成HTML代码时插入的超链接当然是启用的: 仅在预览时单击。

如果你想更改缩略图的大小,只需更改imgsize值即可。

然后,示例代码项目预览变成( 仅用于避免完全大小):

image, 141 kb



文章标签:PRE  预览  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语