README

• 纯JavaScript (ECMA 5)
• PHP

◦ 安装

▸ composer require philippn/auto-reload --dev

◦ 使用

基本

<script src="/vendor/philippn/auto-reload/js/watch.js" watch="/var/www/html/index.php"></script>

更多参数

<script src="/vendor/philippn/auto-reload/js/watch.js"
        reloading-msg="Refreshed"
        timeout="1500"
        watcher-url="/custom-path/watch.php"
        url-request="key=value"
        reloading-amount="2"
        watch="
        /var/www/html/dev/index.php
        /var/www/html/dev/script.js
        /var/www/html/dev/style.css
"></script>

<link rel="stylesheet" href="/vendor/philippn/auto-reload/css/styles.css">

<div id="auto-reload__play-pause" onclick="autoReload.playPauseAutoReload()"></div>
<!--
Grey image color: by default
Black: style="filter:invert(0%)" 
White: style="filter:invert(100%)" 
-->

一旦从 watch 参数更新任何文件，页面将重新加载 N 次（《reloading-amount》）

reloading-amount = 默认为 1

reloading-msg = 页面重新加载指定次数时显示的消息，默认为 '自动重新加载'

timeout = 监视请求之间的时间，以毫秒为单位。默认为 2500

watcher-url = 自定义监视器 URL，默认为 /vendor/philippn/auto-reload/php/watch.php

url-request = 任何附加的 GET 请求字符串（开头没有 ?）

◦ 缓存

使用以下方法清除缓存

▸ vendor/bin/auto-reload

◦ 不使用 composer 使用

从

https://philippn.com/vendor/auto-reload/auto-reload.zip

解压缩它到你的项目中

将此代码片段添加到您希望自动重新加载的页面

<script src="https://philippn.com/vendor/auto-reload/watch.js"
        reloading-msg="Refreshed"
        timeout="1500"
        watcher-url="/auto-reload/watch.php"
        url-request="key=value"
        reloading-amount="2"
        watch="
        /var/www/html/index.php
        /var/www/html/script.js
        /var/www/html/style.css
"></script>

<link rel="stylesheet" href="https://philippn.com/vendor/auto-reload/styles.css">

<div id="auto-reload__play-pause" onclick="autoReload.playPauseAutoReload()"></div>

/auto-reload/watch.php - 你可能可以使用任何路径，取决于你放置解压缩的 auto-reload.zip

◦ 在抛出错误后自动重新加载 PHP 页面

创建一个单独的页面并添加此内容

<script src="https://philippn.com/vendor/auto-reload/ajax-wrapper.js" url="/dev/ajax-wrapper/actual-page.php"></script>

<script src="https://philippn.com/vendor/auto-reload/watch.js"
        watcher-url="auto-reload/watch.php"
        watch="/var/www/html/index.php"
></script>

watcher-url - 可能是相对的（如果你的页面在项目内部）或绝对的（如果你的自动重新加载页面在项目外部）

如果需要执行 JavaScript，请添加此内容

<script src="https://philippn.com/vendor/auto-reload/reload-scripts.js"></script>

您也可以使用这些元素在原始 HTML 之前和之后添加

<div id="auto-reload__prepend">
    <!-- Anything you want to get at the beginning of the page -->
</div>

<div id="auto-reload__append" style="visibility:hidden"> <!-- In case you do not want to see its contents before actual page is loaded -->
    <!-- Anything you want to get at the end of the page -->
</div>

为了改变播放/暂停按钮的位置和外观（CSS），您可以添加自己的样式

<!-- Either prepend or append -->
<div id="auto-reload__prepend">
    <style>
        #auto-reload__play-pause{
            top: 0 !important;
            left: 0 !important;
            filter: invert(100%) !important;
        }
    </style>
</div>

如果您不想在目标页面内容加载之前执行前置/后置 <script>

这有助于避免过时的 undefined variable JavaScript 错误

<div id="auto-reload__prepend">
    <script-ignore>
        // ...
    </script-ignore>
</div>

触发 window.onload 事件

<div id="auto-reload__append" style="visibility:hidden">
    <script>
        dispatchEvent(new Event('load')); // triggered for window.onload initializations
    </script>
</div>

◦ 将 auto-reload.js、ajax-wrapper.js 和 reload-scripts.js 合并到单个脚本 - ajax-watch.js

<script
        src="https://philippn.com/vendor/auto-reload/ajax-watch.js"
        url="actual/page/to/work/with"
        watcher-url="/auto-reload/watch.php"
        reloading-amount="2"
        reloading-msg="Refreshed"
        timeout="1500"
        url-request="key=value"
        watch="
            Bunch
            of
            file
            paths
"
></script>