Dom SoundCloud iframe嵌入生成IndexSizeError
我正在将一个标准iframe嵌入到一个非ssl网页中,该网页显示SoundCloud音乐播放器。播放器可以正常加载,但我发现Safari开发者工具中有以下错误: IndexSizeError:DOM异常1:索引或大小为负值,或大于允许的值 Chrome浏览器中显示的其他相关错误: 未捕获的IndexSizeError:未能对“CanvasRenderingContext2D”执行“getImageData”:源宽度为0 错误参考-第963行。我也尝试过Firefox,但在控制台中也会出现同样的错误。以下是我的iframe代码示例:Dom SoundCloud iframe嵌入生成IndexSizeError,dom,iframe,ssl,https,soundcloud,Dom,Iframe,Ssl,Https,Soundcloud,我正在将一个标准iframe嵌入到一个非ssl网页中,该网页显示SoundCloud音乐播放器。播放器可以正常加载,但我发现Safari开发者工具中有以下错误: IndexSizeError:DOM异常1:索引或大小为负值,或大于允许的值 Chrome浏览器中显示的其他相关错误: 未捕获的IndexSizeError:未能对“CanvasRenderingContext2D”执行“getImageData”:源宽度为0 错误参考-第963行。我也尝试过Firefox,但在控制台中也会出现同样的错
<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有关吗?我也遇到了同样的问题
也就是说,将iframe的
src
设置为datasrc='..'
和src=''
。显示包含iframe的元素时,只需将数据src
交换为src
attr。这很好,因为它可以防止iframe在需要时加载(如果您有很多iframe,比如多个Soundcloud嵌入),并且不会出现大量错误 我也有同样的问题
也就是说,将iframe的
src
设置为datasrc='..'
和src=''
。显示包含iframe的元素时,只需将数据src
交换为src
attr。这很好,因为它可以防止iframe在需要时加载(如果您有很多iframe,比如多个Soundcloud嵌入),并且不会出现大量错误 我也遇到了这个问题。错误消息是关键。当包含SC的iframe
的元素使用display:none
隐藏时,会引发这种异常。当一个元素以这种方式隐藏时,它不可能检索到它的维度,也不可能检索到它的任何子元素,这就是SC的代码试图做的,它试图检索子元素(画布)的维度。要解决此问题,请在初始化小部件之前,先将元素设置为可见性:hidden
。启动小部件后,您可以将其设置为display:none
,以满足您的需要。这样,就可以检索元素的维度,而不会发生错误。我也遇到了这个问题。错误消息是关键。当包含SC的iframe
的元素使用display:none
隐藏时,会引发这种异常。当一个元素以这种方式隐藏时,它不可能检索到它的维度,也不可能检索到它的任何子元素,这就是SC的代码试图做的,它试图检索子元素(画布)的维度。要解决此问题,请在初始化小部件之前,先将元素设置为可见性:hidden
。启动小部件后,您可以将其设置为display:none
,以满足您的需要。通过这种方式,可以检索元素的维度,并且不会发生错误。我同意JDillon的回答,即设置数据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>
那么我也同意adi的回答,你不能使用display:none
在创建自己的播放器以控制soundcloud嵌入播放器时隐藏播放器。在这种情况下,需要使用以下样式将其隐藏:
css
iframe {
max-width: 10rem;
opacity: 0;
position: absolute;
visibility: hidden;
}
我同意JDillon的回答,设置数据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>
那么我也同意adi的回答,你不能使用display:none
在创建自己的播放器以控制soundcloud嵌入播放器时隐藏播放器。在这种情况下,需要使用以下样式将其隐藏:
css
iframe {
max-width: 10rem;
opacity: 0;
position: absolute;
visibility: hidden;
}
这到底是HTTPS的一个问题吗?不是绝对确定,但我的页面运行HTTP,此错误正试图通过HTTPS协议从iframe中加载。可能是不相关的,但值得注意。我已经修改了标题,使之更具体地针对这个问题,而不是建议使用HTTPS。是的,因此这篇文章。引用SoundCloud开发者网站的话:“我们的团队正在回答有关堆栈溢出的技术问题”。你说得对。我一直在做更彻底的测试,我想我可能已经发现了问题。我在网站上使用Bootstrap3,不得不基于设备浏览器显示/隐藏一些内容。SoundCloud iFrame在代码的隐藏部分进行了复制(用于显示少于全屏的音频播放器)。当我删除隐藏/重复的代码部分时,错误就消失了。我知道在Web编程中有几种方法可以得到相同的结果,但我只是把它们放在一起进行测试,并没有考虑这可能是原因。谢谢你的想法!这到底是HTTPS的一个问题吗?不是绝对确定,但我的页面运行HTTP,此错误正试图通过HTTPS协议从iframe中加载。可能是不相关的,但值得注意。我已经修改了标题,使之更具体地针对这个问题,而不是建议使用HTTPS。是的,因此这篇文章。引用SoundCloud开发者网站的话:“我们的团队正在回答有关堆栈溢出的技术问题”。你说得对。我一直在做更彻底的测试,我想我可能已经发现了问题。我在网站上使用Bootstrap3,不得不基于设备浏览器显示/隐藏一些内容。SoundCloud iFrame在代码的隐藏部分进行了复制(用于显示少于全屏的音频播放器)。当我删除隐藏/重复的代码部分时,错误就消失了。我知道在web编程中有几种方法可以达到相同的结果,但我只是把这些方法放在一起进行测试,没有考虑到