网站访问接口顺序执行，防止频繁请求接口而报错，处理切换功能时，必须先请求完数据才可执行下一个功能接口(2025-1-3)
1.父界面实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Del Clock</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.disabled {
pointer-events: none;
/* 禁止点击 */
opacity: 1.0;
/* 改变透明度，给用户提示 */
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand"><img style="width: 225px;" src="img/logo.png" /></span>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left" style="margin-left: 10%;">
<!-- 默认选中 Del Clock 项 -->
<li class="active"><a href="#" class="nav-link" id="homeLink"
data-target="delClock.html">Home</a></li>
<li><a href="#" class="nav-link" id="sendMessageLink" data-target="sendMessage.html">Send
Message</a></li>
<li><a href="#" class="nav-link" data-target="setTime.html">CountDown</a></li>
<li><a href="#" class="nav-link" data-target="clockSet.html">Clock Set</a></li>
<li><a href="#" class="nav-link" data-target="lightLevel.html">Light Level</a></li>
<!-- Setting 和 Tool 下拉菜单 -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
Setting <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#" id="editUserInfo">Edit user information</a></li>
<li><a href="#" id="editTerminal" style="display: none;">Terminal IP Setting</a></li>
<li><a href="#" class="nav-link" data-target="EmailAlerts.html">Email Alerts</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
Tool <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#" id="clockUpdate">IP Clock Update</a></li>
<li><a href="#" class="nav-link" data-target="timeServer.html">Time Servers Setting</a>
</li>
<li><a href="#" id="restUserInfo">Del all clocks</a></li>
</ul>
</li>
<li><a href="#" class="nav-link" id="delClockLink">Del Clock</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" id="userName">admin</a>
</li>
<li><a href="login.html">Exit</a></li>
</ul>
</div>
</div>
</nav>
<!-- 容器内容主体 -->
<!-- 在页面中添加一个 iframe -->
<iframe id="contentFrame" src="" width="100%" height="1599px" frameborder="0"></iframe>
<!-- 底部导航固定栏 -->
<footer class="bg-dark text-white fixed-bottom">
<div class="container py-3">
<footer class="footer">
Copyright © 2024 IP Clock Monitor V 0.0.2
</footer>
</div>
</footer>
<script>
var suesMessages = ""
$(document).ready(function() {
// 监听来自子界面的消息
window.addEventListener('message', function(event) {
// 获取来自子界面的 selectedRowId
suesMessages = event.data.suesMessages;
console.log('从子界面获得的 suesMessages: ', suesMessages);
if(suesMessages == "success"){
enableNavLinks()
}
// 在父界面中处理 suesMessages
// ...
}, false);
document.getElementById('contentFrame').src = "delClock.html";
// 当点击某个导航项（例如 Home）时，开始加载数据
$('.nav-link').click(function(e) {
e.preventDefault(); // 阻止默认行为
// 移除所有 li 项的 active 类
$('.nav > li').removeClass('active');
// 给当前点击的 li 添加 active 类
$(this).parent('li').addClass('active');
var targetPage = $(this).data('target'); // 获取目标页面的URL
console.log('Loading page: ' + targetPage); // 调试输出加载的页面路径
// 禁用所有其他导航项
disableNavLinks();
// 使用iframe加载目标页面
$('#contentFrame').attr('src', targetPage); // 改变iframe的src属性
});
});
// 禁用所有导航项
function disableNavLinks() {
$('a.nav-link').addClass('disabled');
}
// 启用所有导航项
function enableNavLinks() {
$('a.nav-link').removeClass('disabled');
}
</script>
</body>
</html>
2.当子界面接收到数据时，就返回信号给父界面：
window.parent.postMessage({
suesMessages: "success",
selectedRowId: "" // Send the idno of the selected row
}, '*');
3.大功告成！父界面要接收子界面任何动态数据，都可以传递在postMessage中；