解决海康威视插件的遮盖下拉选择框

Joey_iSleepy

于 2023-12-28 10:22:56 发布

阅读量429

点赞数 9

文章标签：前端视频

本文链接：https://blog.csdn.net/qq_60178319/article/details/135262673

版权

下拉选择框出来的时候要异步设置一下，可能会还没塞入节点就发送ifreme通信，重点是iframeRef的通信

            <Select
              ref={selectRef}
              style={{ flex: 1 }}
              listHeight={120}
              onChange={handleChange}
              options={selectOption}
              value={selectVal['iotId'] || null}
              fieldNames={{
                label: 'name',
                value: 'iotId'
              }}
              popupClassName='selectDropBlock'
              notFoundContent={
                <div style={{ color: '#12C2FC' }}>没有匹配的数据</div>
              }
              onDropdownVisibleChange={(open) => {
                if (open) {
                  setTimeout(() => {
                    const selectDropdown =
                      document.getElementsByClassName('selectDropBlock')
                    if (selectDropdown && selectDropdown.length != 0) {
                      iframeRef.current.contentWindow.postMessage({
                        action: 'coverVideo',
                        data: 'selectDropBlock' // 选填，默认
                      })
                    }
                  }, 250)
                } else {
                  iframeRef.current.contentWindow.postMessage({
                    action: 'cancelCoverVideo'
                  })
                }
              }}
            />