埋め込みDiscourseでダークモードと明るいホワイトモードを切り替える方法

サポート
1

私のウェブサイトにはダークモードボタンがあり、ボタンがクリックされたときに、ウェブサイトと同じようにDicourse embedsの色テーマを変更する必要があります。

しかし、埋め込みiframeのbodyにクラスを追加しようとすると、iframe.contentDocument が常にnullであることがわかりました。また、document.getElementById(\"discourse-embed-frame\").contentWindow.document を使用すると、以下のようなエラーが発生します。

image
image1826×146 25.5 KB

クロスオリジンを許可するように埋め込みフレームを設定する方法があると思いますが、いくつかの設定を試しましたが、まだ見つけられていません。

別の方法として postMessage を使用することもできます。例えば document.getElementById(\"discourse-embed-frame\").contentWindow.postMessage(\"darkMode\") のようにですが、スクリプトで darkMode メッセージを処理するハンドラーが必要になります。まだ追加方法を見つけられていません。

2

同様の課題を抱えています。回避策は見つかりましたか？

クロスオリジン問題のため、埋め込みCSSが色を判断するために使用できるようなマーカーをiframeに追加できません。

image
image1146×604 29.7 KB

4

まだ解決していません。公式の返信も受け取っていないので、公式の友達が皆休暇中なのかどうか分かりません。

「いいね！」 1
6

（公式なガイダンスがあるかどうか、念のためお伺いします :slight_smile: ）

「いいね！」 1
7

公式の方法はありますが、公式テーマのみを対象としています: Styling of Embedded Discourse

こちらがお役に立つかもしれません:

8

最新の公式機能を使用して実装しました。
それでも要件がある場合は、以下を参照してください。