Angular 4嵌入SoundCloud错误：无法执行＆＃39; createPattern＆＃39; on＆＃39; CanvasRenderingContext2D＆＃39;：画布宽度为0

Question

我试图将soundcloud iframe嵌入到我的角度4组件中，但我得到了这个 错误代码：

Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The canvas width is 0.

我使用的Iframe代码是：

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/324479935&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true"></iframe>

Answer 1

我在运行NextJS（React SSR）应用程序时遇到相同的错误。通过确保仅将iframe呈现在客户端，可以防止出现这种情况。不是Angular，但希望是相关的。

const SoundcloudEmbed = ({embedUrl}) => {
  return typeof window === 'undefined' ? null : (
    <iframe
      width="100%"
      height="20"
      frameBorder="no"
      src={embedUrl}
    />
  );
}