首先是HTML代码,它定义了一个按钮,当按钮被点击时,会打开一个新的页面并加载output.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<script>
function openOutputPage() {
window.open('output.html', '_blank');
}
</script>
</head>
<body>
<button onclick="openOutputPage()">打开新页面</button>
</body>
</html>
然后是output.html页面的代码,它会在页面加载时调用接口,并且使用JavaScript将持续的数据输出到页面上:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Output Page</title>
<script>
function fetchData() {
// 假设你的API URL是 'your-api-endpoint'
fetch('your-api-endpoint')
.then(response => response.json())
.then(data => {
document.getElementById('data-container').innerText = JSON.stringify(data, null, 2);
})
.catch(error => console.error('Error fetching data: ', error));
}
</script>
</head>
<body onload="fetchData()">
<pre id="data-container">
<!-- 数据将被输出到这里 -->
</pre>
<script>
setInterval(fetchData, 3000); // 每3秒钟调用一次fetchData函数
</script>
</body>
</html>