我将标准iframe嵌入到显示SoundCloud音乐播放器的非ssl网页中。播放器加载正常,但我发现Safari开发人员工具中的错误说明如下:
IndexSizeError:DOM例外1:索引或大小为负数,或大于允许值。
Chrome浏览器中显示的其他相关错误:
Uncaught 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有关吗?
答案 0 :(得分:2)
我遇到了同样的问题this SO question pointed me in the right direction。
即,将您的iframe src
设置为data-src='..'
和src=''
。当您显示包含iframe的元素时,只需将data-src
交换为src
attr即可。这很好,因为它会阻止iframe加载直到它需要(如果你有很多iframe,比如多个Soundcloud嵌入很有用),并且你不会得到大量的错误。
答案 1 :(得分:1)
我也遇到了这个问题。错误消息是密钥。当持有SC的iframe
的元素被display: none
隐藏时,会抛出这种异常。当一个元素以这种方式隐藏时,它不可能检索它的尺寸,也不可能检索它的任何子节点,这是SC的代码试图做的,它试图检索子元素(画布)的尺寸。要解决此问题,请在初始化窗口小部件之前先使用visibility: hidden
设置元素。小部件启动后,您可以使用display: none
设置它以满足您的需求。这样,就可以检索元素的尺寸,并且不会发生错误。
答案 2 :(得分:0)
我同意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&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&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) }
然后我也同意adi的回答,如果您正在创建自己的播放器来控制soundcloud嵌入播放器,则无法使用display: none;
来隐藏播放器。在这种情况下,您需要使用以下样式隐藏它:
<强> CSS 强>
iframe {
max-width: 10rem;
opacity: 0;
position: absolute;
visibility: hidden;
}