多浏览器兼容的动态加载 JavaScript 与 CSS

这里给出多浏览器兼容的动态加载 JavaScript 与 CSS 的完整攻略，主要包括以下几个步骤：

1. 创建一个异步加载的 JavaScript 脚本和 CSS 样式表的函数。
   javascript
function loadExternalResource(url, callback) {
if (url.endsWith('.js')) { // 加载 JavaScript 脚本
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onload = function() {
callback();
};
document.getElementsByTagName('head')[0].appendChild(script);
} else if (url.endsWith('.css')) { // 加载 CSS 样式表
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
link.onload = function() {
callback();
};
document.getElementsByTagName('head')[0].appendChild(link);
}
}

2. 调用上述函数加载所需的 JavaScript 和 CSS 文件（例如 jQuery 和 bootstrap）。
   javascript
loadExternalResource('https://code.jquery.com/jquery-3.6.0.min.js', function() {
// jQuery 加载完成后的回调函数
loadExternalResource('https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css', function() {
// Bootstrap 加载完成后的回调函数
// 这里可以继续加载其他 JavaScript 和 CSS 文件
});
});

以上的代码示例展示了如何异步加载 jQuery 和 Bootstrap，这些文件可以在 CDN 上找到，这样不仅可以加速页面加载，还可以避免跨域的问题。如果需要加载本地的文件，只需将 URL 改为相应的文件路径即可。

另一个示例是动态加载 Google 地图 API。我们可以利用上面的函数动态加载 Google 地图 API，如下所示：

loadExternalResource('https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY', function() {
  // Google 地图 API 加载完成后的回调函数
  // 这里可以继续操作地图相关的代码
});

需要将 YOUR_API_KEY 换成自己的 Google 地图 API 密钥。这样，只有在需要使用地图时才会加载相应的 JavaScript 文件，节省了页面加载时间和网络流量。