如何在index.html文件内加载指定的外部HTML链接

可以实现，根据使用场景不同可以选择以下3种方案，注意跨域相关限制即可：

方案1：使用iframe嵌入（最简单，兼容性最优） #

无需编写JS逻辑，直接在index.html需要展示内容的位置插入iframe标签即可，可自定义宽高、边框等样式：

<iframe src="https://clockmantellstime.github.io/Games/EZ%20money%201/" 
        width="100%" 
        height="800px" 
        frameborder="0"
        allowfullscreen>
</iframe>

说明：仅当目标站点设置了X-Frame-Options响应头禁止外站嵌入时该方案失效，其余场景通用

方案2：Fetch请求内容后直接插入当前DOM #

如果需要将目标页面内容和当前index.html的内容合并到同一个DOM上下文（而非独立的iframe窗口），可以用该方案，要求目标站点开放CORS跨域权限：

<!-- 先在index.html中准备内容容器 -->
<div id="external-content"></div>

<script>
async function loadExternalHtml() {
  try {
    const response = await fetch('https://clockmantellstime.github.io/Games/EZ%20money%201/')
    const htmlContent = await response.text()
    document.getElementById('external-content').innerHTML = htmlContent
  } catch (error) {
    console.error('加载失败，大概率为跨域限制导致：', error)
  }
}
// 页面加载完成后执行加载逻辑
window.addEventListener('load', loadExternalHtml)
</script>

说明：如果控制台报跨域错误，代表目标站点不允许直接请求资源，该方案不可用，建议退回iframe方案

方案3：服务端代理请求 #

如果以上两种方案都无法使用，可以在自己的站点服务端新增代理接口，由服务端先请求目标HTML内容，再返回给前端插入到页面中，可绕过跨域限制。

注意事项 #

• 嵌入外部站点内容请提前确认你拥有对应内容的使用权，避免侵权风险
• 如果直接插入HTML后目标页面的相对路径资源加载异常，可以手动调整资源路径或者添加base标签处理

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