Django项目中iframe加载本地HTML页面报404错误如何解决？

你遇到的404错误是三个错误叠加导致的：

• 最开始直接写src="stationDataHTML.html"用的是相对路径，浏览器会基于当前页面的URL拼接完整请求地址，你没有配置对应匹配的路由，所以加载失败。
• 调整后你把Django模板语法{% url %}直接写在了独立的index.js文件里，Django的模板标签只会在被Django渲染的HTML模板文件里生效，单独的静态JS文件不会被模板引擎解析，所以{% url 'data-stationData' %}没有被替换成真实路径，直接被当成字符串处理了。
• 你的urls.py配置里没有给路由加name参数，就算你在模板里调用{% url 'data-stationData' %}也找不到对应路由。

步骤1：修正urls.py配置 #

给路由指定路径、加上name参数，和你调用的url名匹配：

urlpatterns = [
    path('station-data/', AboutView.as_view(template_name="stationDataHTML.html"), name='data-stationData'),
]

如果这是子应用的urls.py，要确保根路由include该子路由时的前缀正确，比如根路由配置为path('data/', include('你的子应用名.urls'))，那该路由的完整访问路径就是/data/station-data/。

步骤2：修正JS路径调用逻辑，二选一即可 #

方案1：模板注入路径（推荐，可跟随路由配置自动同步） #

在引入index.js的主HTML模板中，提前在全局注入路由地址，放在index.js引入之前的位置：

<script>
window.STATION_DATA_URL = "{% url 'data-stationData' %}";
</script>

修改index.js代码，直接调用全局变量：

if (page == 'stationData') {
    content.innerHTML = '<h1>Station Data</h1>';
    content.innerHTML += '<iframe class="site_data_tab" src="'+ window.STATION_DATA_URL +'"></iframe>';
}

方案2：直接写死路径（适合临时测试） #

确认路由的完整访问路径后，直接写在JS的src属性中，比如路由完整路径是/data/station-data/，就修改为：

if (page == 'stationData') {
    content.innerHTML = '<h1>Station Data</h1>';
    content.innerHTML += '<iframe class="site_data_tab" src="/data/station-data/"></iframe>';
}

先直接在浏览器地址栏输入你配置的路由完整地址，确认可以正常打开stationDataHTML.html的内容，再测试点击事件触发iframe加载的逻辑即可。

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