web-dev-qa-db-ja.com

chartjs対AMPの<canvas>

デフォルトモードの私のWordPressブログには、ChartJSでチャートを描く<canvas>があります。 AMPプラグインをダウンロードし、Google AMPテストツールを実行したところ、次のように表示されました。

次の問題を修正
HTMLタグの使用の禁止または無効
タグ 'canvas'は許可されていません。

これをどのように修正しますか？ AMPでJavaScriptを実行する方法はありますか？

javascriptampcanvas
1
Ken Y-N

AMPを使用する場合、独自のJavaScriptを実行することはできません。これは、AMPの目的に反します。代わりに、 amp-iframe element を使用して外部コンテンツをiframeできます。

  1. Amp-iframe JSを頭に追加します。

    <script async custom-element="amp-iframe"
  src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

  2. Iframeを配置したい場所にamp-iframe要素を追加します。

    <amp-iframe width="200" height="100"
  sandbox="allow-scripts allow-same-Origin" layout="responsive"
  src="https://example.com/"></amp-iframe>

Amp-iframeの使用に関する完全なガイドは、次の場所にあります。

2
grg