From 9d792bbd1fa6ef7136dcca1cc2bd907dba9e6f57 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 03 Sep 2021 16:20:43 +0800
Subject: [PATCH] 视频相关更改
---
public/carVideo/parent.html | 323 +++++++++++++++++++++++++++--------------------------
1 files changed, 165 insertions(+), 158 deletions(-)
diff --git a/public/carVideo/parent.html b/public/carVideo/parent.html
index 4283c32..ccfe324 100644
--- a/public/carVideo/parent.html
+++ b/public/carVideo/parent.html
@@ -2,31 +2,30 @@
<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" />
+ <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%;
- }
+ html,
+ body {
+ padding: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ }
- .iframe {
- 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>
+ <!-- 步骤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>
@@ -34,151 +33,159 @@
<!-- <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
- }
- }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
+ // 步骤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 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事件',
+ // 步骤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,
- },
- 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
+ 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>
--
Gitblit v1.9.3