Angular 4 Embedding SoundCloud Error: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The canvas width is 0

Question

我试图将 soundcloud iframe 嵌入到我的 angular 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 client-side 来防止它。不是 Angular 但希望相关。

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

Angular 4 Embedding SoundCloud Error: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The canvas width is 0

Angular 4 Embedding SoundCloud Error: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The canvas width is 0

javascript

iframe

soundcloud

angular