如果internet可用，则导入JavaScript文件

要在Internet可用时导入JavaScript文件，可以使用以下几种方法：

基础概念

Internet可用性：指的是设备能够连接到互联网并访问外部资源。
JavaScript文件导入：通过<script>标签将外部JavaScript文件引入到HTML文档中。

类型与应用场景

按需加载：适用于大型应用，只在需要时加载特定功能模块。
离线优先：结合Service Workers实现离线优先策略，网络恢复后再同步数据。

实现方法

方法一：使用JavaScript检测网络状态并动态加载脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Script Loading</title>
</head>
<body>
    <h1>Check Internet and Load Script</h1>

    <script>
        function loadScript(url) {
            return new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = url;
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }

        function checkInternetAndLoadScript() {
            if (navigator.onLine) {
                loadScript('https://example.com/script.js')
                    .then(() => console.log('Script loaded successfully'))
                    .catch(err => console.error('Failed to load script', err));
            } else {
                console.log('No internet connection, script not loaded.');
            }
        }

        window.addEventListener('load', checkInternetAndLoadScript);
    </script>
</body>
</html>

方法二：使用Service Worker进行缓存和控制

// service-worker.js
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('v1').then(cache => {
            return cache.addAll([
                '/',
                '/index.html',
                '/styles.css'
            ]);
        })
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request);
        })
    );
});

在主页面注册Service Worker：

<script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/service-worker.js')
                .then(registration => {
                    console.log('Service Worker registered with scope:', registration.scope);
                })
                .catch(error => {
                    console.error('Service Worker registration failed:', error);
                });
        });
    }
</script>