在槽内为 VPAID 广告创建 iFrame 不会呈现帧的 DOM答案

【问题标题】：Creating iFrame inside slot for VPAID ad is not rendering DOM of the frame在槽内为 VPAID 广告创建 iFrame 不会呈现帧的 DOM
【发布时间】：2019-03-28 11:49:35
【问题描述】：

我已经尝试解决这个问题很长时间了。我正在根据规范创建 VPAID 脚本来支持基本的 VPAID 功能。

为了展示广告，我使用了 initAd 参数中提供的插槽，并在我的视频播放器 (PlayerJS) 中附加了一个 iFrame 来展示广告（必须使用自己的播放器进行第三方事件跟踪等）。如果插槽没有被 display CSS 属性隐藏或者它的容器没有隐藏，那么一切都运行良好。当它被隐藏时，浏览器不会让 iframe dom 用 js 渲染，所以播放器无法启动。

initAd(width, height, viewMode, desiredBitrate, creativeData, environmentVars) {
        this._attributes.width = width
        this._attributes.height = height
        this._attributes.viewMode = viewMode
        this._attributes.desiredBitrate = desiredBitrate
        this._slot = environmentVars.slot || this.this.emit('AdError', 'Slot is invalid')
        this._slotWnd = function(a) {
            a = a.ownerDocument
            return a.defaultView || a.parentWindow
        }(this._slot)
        this._videoSlot = environmentVars.videoSlot || this.this.emit('AdError', 'Video slot is invalid')
        try {
            this.adParameters = JSON.parse(creativeData.AdParameters)
        } catch (e) {
            console.error('Error parsing AdParameters')
            console.log(e)
        }
        this._slotWnd.addEventListener('message', (event) => { this.eventHandler(event, this) })
       this._player = new PlayerFrameIniter(this._slot, this._slotWnd, false, true)
       this._player.init( () => this.emit('AdLoaded') )
    }

在 PlayerFrameIniter 中，我正在创建一个像这样的 iframe：

createIframe(container, url, onFrameLoaded) {
        this._frame = this._context.document.createElement('iframe')
        const style = {
            width: '100%',
            height: '100%',
            border: 0,
            position: 'absolute',
            overflow: 'hidden'
        }
        Object.assign(this._frame.style, style)
        this._frame.src = url
        this._frame.onload = onFrameLoaded
        container.appendChild(this._frame)
    }

如何使插槽内的框架正确渲染，或者此任务可能有不同的方法？

【问题讨论】：

标签： javascript iframe vast vpaid

【解决方案1】：

这似乎是 PlayerJS 问题，所以问题不再是实际问题

【讨论】：

您好，如果您不介意，您可以通过 github 分享代码吗/？