与海康威视网络插件兼容的 iframe 步进实践
最编程
2024-06-08 16:40:51
...
原因:
海康威视3.1开发指南,明确指出了,目前仅支持配合 div 标签使用,不支持基于 iframe 方式也不支持浏览器页面弹出页面的使用方式
由于客户要求进行iframe适配
遇见问题1: 嵌套iframe ,提示跨域问题。
查看控制台报错,提示 海康插件(jsWebControl-1.0.0.min.js)源码中(h=window.top,p=h.document.title) 无法获取当前浏览器的title ,出现的问题,
解决方案:
删除 源码中 相关用到的(p=h.document.title)代码
遇见问题2: 跨域解决,视频插件 初始化位置有问题
经过研究,发现插件初始化位置是根据浏览器的初始位置来进行初始化的,导致视频插件位置不是以iframe的相对位置来初始化的。
解决方案:父窗口将iframe的相对位置 offset.top和offset.left传给iframe窗口中的视频插件,视频插件再根据相对位置初始化插件,需要用到window.postMessage()方法(可以安全地实现Window对象之间的跨域通信。)
父
<div id="myVideo" style="margin-left:20%;width: 80%;height: 60%; ">
<iframe src="url" width="100%" height="100%" id="iframe"></iframe>
</div>
function fd(wait) {
let timer = null
return function () {
if (timer != null) clearTimeout(timer)
timer = setTimeout(() => {
postIframe()
console.log('函数防抖触发');
}, wait)
}
}
let myfd = fd(1000)
window.onresize = function () {
myfd()
}
window.onload=function(){
postIframe()
}
function postIframe() {
let myMessage = $('#myVideo').offset() // iframe相对浏览器的偏移量 top 和left
let parentHeight = $('#myVideo').height() //iframe窗口大小
let parentWidth = $('#myVideo').width() // //iframe窗口大小
var receiver = document.getElementById('iframe').contentWindow;
receiver.postMessage({ parentHeight, parentWidth, myMessage }, '*');
}
子
function changeVideo() {
//操作dom元素,修改插件的窗口大小
$("#playWnd").css("width", newWidth + "px");
$("#playWnd").css("height", newheight + "px");
//操作dom元素 修改插件的相对浏览器的相对位置
$("#playWnd").css("margin-top", Number(inittop) + 1 + "px");
$("#playWnd").css("margin-left", Number(initLeft) + 1 + "px");
if (oWebControl != null) {
oWebControl.JS_Resize(newWidth, newheight);
$(".hikRight").css("left", newWidth - 11 + "px");
}
}
$(function () {
//监听message
window.addEventListener('message', function (e) {
// console.log(e.data) //e.data为传递过来的数据
inittop = e.data.myMessage.top
initLeft = e.data.myMessage.left
newheight = e.data.parentHeight
newWidth = e.data.parentWidth
changeVideo() //通过修改dom控制视频窗口位置
videoTimer = setTimeout(() => {
$("#playWnd").css("margin-top", 0 + "px");
$("#playWnd").css("margin-left", 0 + "px");
}, 1000)
})
//初始化视频插件
initPlugin()
})
问题3:视频插件闪烁
研究源码发现,发现initPlugin()
和init()
函数分别加载了插件,但是加载的方式不同。initPlugin()
加载通过浏览器窗口计算div所在位置,init()
通过当前iframe计算div所在位置,结果就是两个插件显示位置不一样,导致插件闪烁。
解决方案: 在init()函数 初始化成功后 将插件的位置设为iframe 的(0,0,)位置
.then(function (oData) {
oWebControl.JS_Resize(newWidth, newheight)
// 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
$("#playWnd").css("margin-top", -1 + "px");
$("#playWnd").css("margin-left",0+ "px");
})