问题描述
我的 html 页面中有一个 iframe，它应该可以顺利刷新（不闪烁）。因此，我尝试将两个 iframe 放在一起，但有时向下滚动时它仍然会闪烁。
task.html
<!DOCTYPE html>
<html>
<head>
<title>Pending Tasks</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<style>
.sc_table {
height: 100vh;
overflow: scroll;
}
</style>
</head>
<body>
<div>
<center>
<h2>Pending Tasks</h2>
</center>
</div>
<div class="container-fluid p-2 sc_table b-5">
<table class="table table-striped table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Title</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td data-toggle="tooltip" data-placement="right" title="Testing of automation with sql">Testing</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td data-toggle="tooltip" data-placement="right" title="retfgretgf">gdfrtdfrsg</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">3</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">4</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">5</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">6</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">7</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">8</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">9</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">10</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">11</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">12</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">13</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">14</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">15</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">16</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">17</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">18</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">19</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">20</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">21</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">22</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">23</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">24</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">25</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">26</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">27</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">28</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">29</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">30</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">31</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">32</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">33</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">34</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">35</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">36</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">37</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">38</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">39</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">40</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">41</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">42</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">43</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">44</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">45</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
<tr>
<th scope="row">46</th>
<td data-toggle="tooltip" data-placement="right" title="title">2</td>
<td><a href="?id=" class="btn btn-primary">Start</a></td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
$(".sc_table").scroll(function() {
localStorage.setItem('scpos',$(".sc_table").scrollTop());
});
function isetFrame() {
var scrollpos = localStorage.getItem('scpos');
$(".sc_table").scrollTop(scrollpos);
}
isetFrame();
setInterval(isetFrame,1);
</script>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<title>TV</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<style>
body,html {
width: 100%;
height: 100%;
margin: 0;
padding: 0
}
.self-container {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
overflow: hidden;
}
.embed-responsive-item {
flex-grow: 1;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="self-container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html">TV</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Task
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="?task=active">Active</a>
<a class="dropdown-item" href="?task=pending">Pending</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="?task=completed">Completed</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="?task=new">New</a>
</div>
</li>
</ul>
Network
</div>
</nav>
<div class="embed-responsive embed-responsive-1by1 container-fluid">
<iframe id="iframeid" class="embed-responsive-item" src="task.html"></iframe>
<iframe id="iframeidc" class="embed-responsive-item" src="task.html"></iframe>
</div>
</div>
</body>
<script>
function setFrame() {
$('#iframeidc',window.parent.document).attr('src',$('#iframeid',window.parent.document).attr('src'));
$("#iframeidc").on("load",function (e) {
$("#iframeidc").show()
$("#iframeid").hide()
});
$('#iframeid',$('#iframeidc',window.parent.document).attr('src'));
$("#iframeid").on("load",function (e) {
$("#iframeid").show()
$("#iframeidc").hide()
});
}
setFrame();
setInterval(setFrame,1000);
</script>
</html>
我的 html 页面中有一个 iframe，它应该可以顺利刷新（不闪烁）。因此，我尝试将两个 iframe 放在一起，但有时向下滚动时它仍然会闪烁。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）