海康威视Web插件兼容iframe的踩坑实践

原因：

海康威视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对象之间的跨域通信。）

父 复制代码 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”); })复制代码