SoundCloud iframe 嵌入产生 IndexSizeError

Question

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

IndexSizeError：DOM 异常 1：索引或大小为负数，或大于允许值。

Chrome 浏览器中出现其他相关错误：

未捕获的 IndexSizeError：无法在“CanvasRenderingContext2D”上执行“getImageData”：源宽度为 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 的代码试图做的，它试图检索子元素（画布）的尺寸。要解决此问题，请先使用visibility: hidden 设置您的元素，然后再初始化小部件。小部件启动后，您可以使用display: none 对其进行设置以满足您的需求。这样，可以检索元素的尺寸，并且不会发生错误。

Answer 2

我遇到了同样的问题，this SO question pointed me in the right direction。

即，将 iframe 的 src 设置为 data-src='..' 和 src=''。当您显示包含 iframe 的元素时，只需将 data-src 交换为 src attr。这很好，因为它会阻止 iframe 在需要之前加载（如果您有很多 iframe，例如多个 Soundcloud 嵌入，则很有用），并且您不会收到大量错误。

Answer 3

我同意 JDillon 的回答，即设置 data-src，然后在准备好初始化播放器时切换 src。像这样：

html

<iframe id="sc-widget" width="0" height="0" scrolling="no" frameborder="no" src="" data-src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/3333333%3Fsecret_token%3Dx-xxxx&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>

js (es6)

let widgetIframe = document.getElementById('sc-widget')
widgetIframe.src = widgetIframe.dataset.src
let $embedPlayer = SC.Widget(widgetIframe)

/* example of using soundcloud embed player */
$embedPlayer.bind(SC.Widget.Events.PLAY, () => {
  $embedPlayer.getDuration((duration) => setDuration(duration))
})

$embedPlayer.bind(SC.Widget.Events.PLAY_PROGRESS, () => {
  $embedPlayer.getPosition((position) => setPosition(position))
})

function setPosition(pos) { console.log(pos) }
function setDuration(dur) { console.log(dur) }

那么我也同意阿迪的回答，如果您正在创建自己的播放器来控制soundcloud嵌入播放器，则不能使用display: none;隐藏播放器。在这种情况下，您需要使用以下样式隐藏它：

css

iframe {
  max-width: 10rem;
  opacity: 0;
  position: absolute;
  visibility: hidden;
}