我需要一些帮助。我想为我的源代码创建一个后备。我正在使用 CDN 来托管我的 javascript、css 和图像。我想做的是在 php 中创建一个回退,例如 ip 123.456.789 在 400 毫秒内不可用,php 将回退到 987.654.321 获取我的本地存储
我在想一些与此类似的事情:
if ip 123.456.789 in 400ms
//show this file from 123.456.789
else
//show this file from 987.654.321
我的源代码是硬编码的,例如:
<script type="text/javascript" src="123.456.789/js/jquery.js"></script>
因此,如果 123.456.789 在 400 毫秒内不可用,我希望加载此地址
<script type="text/javascript" src="987.654.321/js/jquery.js"></script>
我不久前回答了我自己的问题。所以决定在这里分享。
<?php
//debug off by default
error_reporting(0);
//cdn fallback
if (!isset($_GET['aws_cdn'])) {
$cdn_fallback = curl_init('http://123.456.789/'); //Set to CDN IP or URL
curl_setopt($cdn_fallback, CURLOPT_RETURNTRANSFER, true);
curl_setopt($cdn_fallback, CURLOPT_NOSIGNAL, 1);
curl_setopt($cdn_fallback, CURLOPT_TIMEOUT_MS, 400); //How many milliseconds before fallback to local storage
$data = curl_exec($cdn_fallback);
$curl_errno = curl_errno($cdn_fallback);
$curl_error = curl_error($cdn_fallback);
curl_close($cdn_fallback);
if ($curl_errno > 0) { ?>
<script type="text/javascript" src="http://example.com/js/jquery.js"></script>
<?php } else { ?>
<script type="text/javascript" src="http://123.456.789/cdn/js/jquery.js"></script>
<?php }} ?>
您可以使用JavaScript检测CDN资源是否加载失败,然后回退到本地副本。以下是实现这一目标的方法:
1。使用后备加载 CDN 资源:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CDN Fallback Example</title>
<!-- Bootstrap CSS from CDN with fallback -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha384-whateverhash" crossorigin="anonymous" onerror="this.onerror=null;this.href='local-path/bootstrap.min.css';">
<!-- jQuery from CDN with fallback -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-whateverhash" crossorigin="anonymous" onerror="this.onerror=null;this.src='local-path/jquery-3.6.0.min.js';"></script>
<!-- Your local stylesheets -->
<link rel="stylesheet" href="path/to/your/local/styles.css">
</head>
<body>
<!-- Your HTML content -->
<!-- Bootstrap JS from CDN with fallback -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js" integrity="sha384-whateverhash" crossorigin="anonymous" onerror="this.onerror=null;this.src='local-path/bootstrap.bundle.min.js';"></script>
<!-- Your local scripts -->
<script src="path/to/your/local/scripts.js"></script>
</body>
</html>
2。使用 JavaScript 进行回退:
如果想在加载本地脚本之前确保CDN已经失败,可以添加JavaScript检查:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CDN Fallback Example</title>
<!-- Bootstrap CSS from CDN -->
<link id="bootstrap-css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha384-whateverhash" crossorigin="anonymous">
<!-- Your local stylesheets -->
<link rel="stylesheet" href="path/to/your/local/styles.css">
</head>
<body>
<!-- Your HTML content -->
<!-- jQuery from CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-whateverhash" crossorigin="anonymous"></script>
<script>
// Check if jQuery loaded, if not, load local copy
if (typeof jQuery == 'undefined') {
var script = document.createElement('script');
script.src = 'local-path/jquery-3.6.0.min.js';
document.head.appendChild(script);
}
</script>
<!-- Bootstrap JS from CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js" integrity="sha384-whateverhash" crossorigin="anonymous"></script>
<script>
// Check if Bootstrap CSS loaded, if not, load local copy
var bootstrapCss = document.getElementById('bootstrap-css');
bootstrapCss.onerror = function() {
this.onerror=null;
this.href='local-path/bootstrap.min.css';
};
</script>
<!-- Your local scripts -->
<script src="path/to/your/local/scripts.js"></script>
</body>
</html>
在这些例子中:
这样,当您离线或CDN资源加载失败时,将使用您的本地副本。