dom - SoundCloud iframe 嵌入产生 IndexSizeError

Question

我将标准 iframe 嵌入到显示 SoundCloud 音乐播放器的非 SSL 网页中。播放器加载正常，但我在 Safari 开发者工具中发现错误如下:

IndexSizeError: DOM Exception 1: Index or size was negative, or greater than the allowed value.

Chrome 浏览器中显示的其他相关错误:

Uncaught IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0

错误引用 https://w.soundcloud.com/player/assets/layouts/visual-single-sound-67f5bd61.js - 第 963 行。我也尝试过 Firefox，但在控制台中得到了相同的错误。这是我的 iframe 代码示例:

<iframe scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F12345678&auto_play=false&show_artwork=true&visual=true"></iframe>

有什么办法可以消除这些错误吗？它可能与从我的 HTTP 父页面下的 HTTPS 引用加载 javascript 有关吗？

Answer 1

我也遇到了这个问题。错误信息是关键。当持有 SC 的 iframe 的元素被 display: none 隐藏时，会抛出这种异常。当一个元素以这种方式隐藏时，就不可能检索它的尺寸或它的任何子元素，这是 SC 的代码试图做的，它试图检索子元素( Canvas )的尺寸。要解决这个问题，首先要在初始化小部件之前将元素设置为 visibility: hidden。小部件启动后，您可以使用 display: none 设置它以满足您的需要。这样，就可以检索元素的尺寸并且不会发生错误。