Question

我有一个按钮，使用innerHTML函数将HTML加载到div中。我第一次点击它，它正确加载HTML，但如果我更改数据源，当我再次单击该按钮时，这些更改都不会反映出来。它只是重新加载第一次单击按钮时准确的HTML。刷新页面没有帮助。如何让它在每次点击时正确调用当前数据源？

按钮：

<li><button onclick="load_bookings();">Bookings</button></li>

功能：

function load_bookings() {
        document.getElementById("content").innerHTML='<object type="text/html" data="bookings_home.html" height=100% width=100%></object>';
    }

Answer 1

出现你正在做的是在object标签中加载一个页面，这是非常不寻常的。我认为你遇到的问题是通过GET请求请求文件bookings_home.html，并进行缓存。如果你想要一个新版本的文件，你需要添加一个＆＃34; cache-buster＆＃34; URL /文件名的参数：

document.getElementById("content").innerHTML='<object type="text/html" data="bookings_home.html?_=' + Date.now() + '" height=100% width=100%></object>';

当然，最好使用document.createElement()为页面添加标记。

MDN - Document.createElement()

Answer 2

的index.html：

<!DOCTYPE html>
<meta charset="utf-8">
<ul>
    <li><button onclick="load_bookings();">Bookings</button></li>
</ul>
<div id="content"></div>
<script>
    function load_bookings() {
        document.getElementById('content').innerHTML = '<object type="text/html" data="bookings_home.html" height="100%" width="100%"></object>';
    }
</script>

bookings_home.html：

<!DOCTYPE html>
<meta charset="utf-8">
<div id="some"></div>
<script>
    document.getElementById('some').innerHTML = String(Math.random());
</script>

我在本地进行了测试。一切正常。另外，请注意缓存（ Sam R 的回答）。

所谓的innerHTML函数并不反映点击

2 个答案: