如何从文本文件读取URL并在iframe中正确加载对应网页？

问题根源 #

你当前直接将settings.txt设为iframe的src属性，浏览器会加载这个文本文件并显示其内容，而非解析文件内的URL去加载对应网页。

修正方案 #

使用fetch API读取settings.txt的内容，处理URL格式后再赋值给iframe：

修改HTML中的<script>部分为：

const myFile = "settings.txt";
fetch(myFile)
  .then(response => response.text())
  .then(url => {
    // 移除文本中的换行、空格等多余字符
    url = url.trim();
    // 为缺少协议前缀的URL补充https://
    if (!/^https?:\/\//i.test(url)) {
      url = `https://${url}`;
    }
    document.getElementById('MyFrame').setAttribute("src", url);
  })
  .catch(error => {
    console.error('读取配置文件失败:', error);
  });

关键细节说明 #

1. 读取文件内容：fetch会异步获取settings.txt的文本内容，避免阻塞页面加载。
2. 清理URL：trim()用于去除文件中可能存在的换行、空格，确保URL格式干净。
3. 补充协议前缀：如果URL仅为desmos.com/calculator这类无协议的形式，浏览器会将其视为当前页面的相对路径，补充https://后才能正确识别为外部网页地址。
4. 本地运行限制：如果直接用file://协议打开本地HTML文件，部分浏览器会限制读取本地文本文件，此时需要搭建本地服务器（如Python的python -m http.server命令）来运行项目。
5. 网站嵌入限制：部分网站通过X-Frame-Options响应头禁止被iframe嵌入，这类网站无法通过此方法加载，属于网站的安全策略限制。

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