<!doctype html>
|
<html>
|
|
<head>
|
<title>Window Demo</title>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Pragma" content="no-cache" />
|
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
<meta http-equiv="Expires" content="0" />
|
</head>
|
<style>
|
html,
|
body {
|
padding: 0;
|
margin: 0;
|
width: 100%;
|
height: 100%;
|
}
|
|
.iframe {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
|
<body>
|
<!-- 步骤1：src指定待嵌入的子页面，scrolling指定no禁用滚动条 -->
|
<iframe id="iframe1" class="iframe" src="children.html" scrolling="no" frameborder="0"></iframe>
|
</body>
|
<script src="jquery-1.12.4.min.js"></script>
|
<script src="jsencrypt.min.js"></script>
|
<script src="jsWebControl-1.0.0.min.js"></script>
|
<!-- <script src="JsonToXml.js"></script>
|
<script src="jsWebControl-Bridge.js"></script> -->
|
<script type="text/javascript">
|
// 步骤2：嵌入子页面的页面中在iframe的onload事件中向子页面抛以下消息
|
var iframeWin = document.getElementById("iframe1"); {
|
iframeWin.onload = function () {
|
iframeWin.contentWindow.postMessage({
|
action: 'sendTitle', // 告诉子页面本页面的标题（action自行指定，但需要与子页面中监听的action保持一致
|
msg: '将标题发给子页面',
|
info: document.title
|
}, '\*');
|
iframeWin.contentWindow.postMessage({
|
action: 'updateInitParam', // 告诉子页面一些初始值，包括浏览器视窗高度与宽度、iframe偏离文档的位置、iframe相对视窗的位置
|
msg: '更新子页面一些初始值',
|
showSize: { // 浏览器视窗高度与宽度
|
width: 800,
|
height: 400
|
},
|
iframeOffset: { // iframe偏离文档的位置
|
left: iframeWin.offsetLeft,
|
top: iframeWin.offsetTop
|
},
|
iframeClientPos: { // iframe相对视窗的位置
|
left: iframeWin.getBoundingClientRect().left,
|
right: iframeWin.getBoundingClientRect().right,
|
top: iframeWin.getBoundingClientRect().top,
|
bottom: iframeWin.getBoundingClientRect().bottom
|
}
|
}, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
|
}
|
}
|
|
// 步骤3：监听嵌入子页面的事件
|
window.addEventListener('message', function (e) {
|
console.log(e.data.msg);
|
if (e && e.data) {
|
switch (e.data.action) {
|
case 'updateTitle': // 本页面收到子页面通知更新标题通知，更新本页面标题
|
document.title = e.data.info;
|
break;
|
case 'updatePos':
|
var scrollLeftValue = document.documentElement.scrollLeft;
|
var scrollTopValue = document.documentElement.scrollTop;
|
iframeWin.contentWindow.postMessage({
|
action: 'updatePos',
|
msg: '更新Pos',
|
scrollValue: { // 滚动条滚动的偏移量
|
left: -1 * scrollLeftValue,
|
top: -1 * scrollTopValue,
|
}
|
}, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
|
break;
|
default:
|
break;
|
}
|
}
|
});
|
|
// 步骤4：兼听本页面的resize事件，并将一些状态值发送给嵌入的子页面
|
var resizeTimer = null;
|
var resizeDate;
|
$(window).resize(function () {
|
resizeDate = new Date();
|
if (resizeTimer === null) {
|
resizeTimer = setTimeout(checkResizeEndTimer, 100);
|
}
|
});
|
|
function closeVideo() {
|
document.getElementById('iframe1').contentWindow.close()
|
}
|
|
function startVideo() {
|
document.getElementById('iframe1').contentWindow.initPlugin()
|
}
|
|
function checkResizeEndTimer() {
|
if (new Date() - resizeDate > 100) { // resize结束后再发消息，避免残影问题
|
clearTimeout(resizeTimer);
|
resizeTimer = null;
|
postResizeEvent();
|
} else {
|
setTimeout(checkResizeEndTimer, 100);
|
}
|
}
|
|
function postResizeEvent() {
|
iframeWin.contentWindow.postMessage({
|
action: 'resize',
|
msg: 'resize事件',
|
showSize: { // 告诉嵌入的子页面视窗高度与宽度
|
width: $(window).width(),
|
height: $(window).height()
|
},
|
iframeClientPos: { // iframe相对视窗的位置
|
left: iframeWin.getBoundingClientRect().left,
|
right: iframeWin.getBoundingClientRect().right,
|
top: iframeWin.getBoundingClientRect().top,
|
bottom: iframeWin.getBoundingClientRect().bottom
|
},
|
iframeOffset: { // iframe偏离文档的位置
|
left: iframeWin.offsetLeft,
|
top: iframeWin.offsetTop
|
}
|
}, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
|
}
|
|
// 步骤5：兼听本页面的scroll事件，并将一些状态值发送给嵌入的子页面
|
// 为性能考虑，可以在定时器中处理
|
var scrollTimer = null;
|
var scrollDate;
|
$(window).scroll(function (event) {
|
postScrollEvent();
|
scrollDate = new Date();
|
if (scrollTimer === null) {
|
scrollTimer = setTimeout(checkScrollEndTimer, 100);
|
}
|
});
|
|
function checkScrollEndTimer() {
|
if (new Date() - scrollDate > 100) { // resize结束后再发消息，避免残影问题
|
clearTimeout(scrollTimer);
|
scrollTimer = null;
|
} else {
|
postScrollEvent();
|
setTimeout(checkScrollEndTimer, 100);
|
}
|
}
|
|
function postScrollEvent() {
|
// 计算滚动条偏移量
|
var scrollLeftValue = document.documentElement.scrollLeft;
|
var scrollTopValue = document.documentElement.scrollTop;
|
iframeWin.contentWindow.postMessage({
|
action: 'scroll',
|
msg: 'scroll事件',
|
scrollValue: { // 滚动条滚动的偏移量
|
left: -1 * scrollLeftValue,
|
top: -1 * scrollTopValue,
|
},
|
iframeClientPos: { // iframe相对视窗的位置
|
left: iframeWin.getBoundingClientRect().left,
|
right: iframeWin.getBoundingClientRect().right,
|
top: iframeWin.getBoundingClientRect().top,
|
bottom: iframeWin.getBoundingClientRect().bottom
|
},
|
showSize: { // 告诉嵌入的子页面视窗高度与宽度
|
width: $(window).width(), // 视窗宽度
|
height: $(window).height() // 视窗高度
|
},
|
iframeOffset: { // iframe偏离文档的位置
|
left: iframeWin.offsetLeft,
|
top: iframeWin.offsetTop
|
}
|
}, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
|
}
|
</script>
|
|
</html>
|
