如何在live_link.txt链接更新时自动更新iframe的src属性？

问题分析 #

当前PHP代码仅在页面首次加载时读取一次live_link.txt，只有手动刷新页面才能获取新URL。你之前尝试的PHP循环方案会导致页面加载失败，是因为PHP作为服务端脚本，循环会持续占用进程，无法完成响应返回给浏览器。要实现自动更新，需要采用前端定时请求+后端接口的组合方案，让前端主动检查URL变化。

解决方案 #

1. 编写后端接口（get_live_link.php） #

先做一个轻量的PHP接口，专门返回live_link.txt里的最新URL：

<?php
$filePath = 'live_link.txt';
// 增加文件存在判断，避免报错
if (file_exists($filePath)) {
    $text = file_get_contents($filePath);
    $lines = explode(PHP_EOL, trim($text));
    echo reset($lines);
} else {
    echo ''; // 可替换为你的默认URL
}
?>

2. 修改live_link_frame.php的前端逻辑 #

在原页面中加入JavaScript代码，定时请求上述接口，对比当前iframe的src，只有当URL变化时才更新：

<?php
// 初始加载URL
$filePath = 'live_link.txt';
$live_link = '';
if (file_exists($filePath)) {
    $text = file_get_contents($filePath);
    $lines = explode(PHP_EOL, trim($text));
    $live_link = reset($lines);
}
?>

<iframe id="liveFrame" src="<?php echo $live_link; ?>"></iframe>

<script>
// 设置检查间隔，比如5秒一次（可按需调整）
const checkInterval = 5000;
const liveFrame = document.getElementById('liveFrame');
let currentUrl = liveFrame.src;

function checkForUpdate() {
    fetch('get_live_link.php')
        .then(response => response.text())
        .then(newUrl => {
            newUrl = newUrl.trim(); // 去除空白字符，避免换行/空格干扰
            if (newUrl && newUrl !== currentUrl) {
                currentUrl = newUrl;
                liveFrame.src = newUrl;
            }
        })
        .catch(error => {
            console.error('检查URL更新失败:', error);
        });
}

// 启动定时检查
setInterval(checkForUpdate, checkInterval);
</script>

3. 关键优化说明 #

• 避免无效更新：每次请求后对比新旧URL，仅在不同时重载iframe，减少不必要的页面操作。
• 异常处理：接口增加文件存在判断，前端请求加入错误捕获，避免小问题导致功能失效。
• 间隔可调：checkInterval的值可根据需求修改，需要更实时就设小（比如1秒），但不要过小以免增加服务器压力。

为什么PHP循环不可行？ #

PHP是服务端脚本，页面请求时必须执行完所有代码才会返回响应给浏览器。如果用循环持续读取文件，会导致服务端进程一直挂起，浏览器始终处于加载状态，这就是你之前遇到的页面无法完全加载的原因。而前端定时请求是在浏览器端异步执行，不会阻塞页面正常加载。

内容的提问来源于stack exchange，提问作者ItIsFinished