html文件编辑效果在浏览器中自动同步刷新显示

最新推荐文章于 2021-06-29 11:11:00 发布

原创最新推荐文章于 2021-06-29 11:11:00 发布 · 6.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#刷新 #html-web开发 #浏览器

Coding人生专栏收录该内容

5 篇文章

订阅专栏

在Ubuntu14.04上使用vim编辑html、css或js文件时，可以通过安装Firefox的Auto Reload和Chrome的LivePage插件实现文本更改后浏览器页面的自动刷新。此外，介绍了一种在浏览器中直接打开本地文本文件的方法，并在.vimrc中配置快捷键，以在Firefox或Chrome中快速预览文件内容。

html css js等文本更改时自动同步刷新浏览器效果页的方法

系统：Ubuntu14.04
编辑器：vim

通过安装插件实现
- firefox插件Auto Reload
- google-chrome插件LivePage(请自备梯子)
安装成功后，对于所有类型的在浏览器中打开的文本文件效果页，都能在本地文件被修改后实时刷新

通过在所编辑的文件中加入标签句 `<meta http-equiv="refresh" content="1">` 实现

以html文件为例:

  <html>
        <head>
            <title>Title of the document</title>
            <meta http-equiv="refresh" content="1" >
        </head>

        <body>
            The details of the document......
        </body>
  </html>
  *注意：该语句加在文本文件的任何一行皆可生效。在 html 文件中，加在 "<head></head>" 内更符合语法规范，文件可读性更强

  再次强调，该标签语句适用于任意类型文本文件

如何在浏览器中打开本地文本文件
- 假设，现在我的一个名为 “test1.html” 的html文件存放位置的绝对路径是 /home/willyon/web_develop/html/test.html，那么我在浏览器地址栏中输入 file:///home/willyon/web_develop/html/test1.html 即可。效果如下图：

如何通过vim在浏览器中快速打开本地文本文件
- 在 .vimrc 文件中加入设置行 nnoremap ,v :exec '!exec firefox %'<CR> 那么进入任何一个文本文件进行编辑时，在vim普通模式下，键入 ,v 可在firefox浏览器中打开当前正在编辑的文件的内容
- 当然，浏览器可任意修改，例如 nnoremap ,v :exec '!exec google-chrome %'<CR> 则表示在google浏览器中打开文件