ツール拡張機能に iFrame を追加する

適用先:Windows Admin Center、Windows Admin Center Preview

この記事では、Windows Admin Center CLI で作成した新しい空のツール拡張機能に iFrame を追加します。

環境を準備する

まだ行っていない場合は、ツール拡張機能を開発する手順に従って環境を準備し、新しい空のツール拡張機能を作成します。

モジュールをプロジェクトに追加する

新しい空のモジュールをプロジェクトに追加します。ここに、次の手順で iFrame を追加します。

iFrame をモジュールに追加する

ここで、作成した新しい空のモジュールに iFrame を追加します。

\src\app で、ご使用のモジュール フォルダーを参照し、次の名前付け規則で見つかる {!module-name}.component.html ファイルを開きます。

値	説明	ファイル名の例
{!module-name}	モジュール名 (小文字、スペースをダッシュに置換)	manage-foo-works-portal.component.html

次の内容を html ファイルに追加します。

<div>
  <iframe  style="height: 850px;" src="https://www.bing.com"></iframe>
</div>

これで、拡張機能に iFrame が追加されました。 次に、拡張機能を作成して Windows Admin Center にサイド ロードし、結果を確認できます。

注意

コンテンツ セキュリティ ポリシー (CSP) の設定により、一部のサイトが Windows Admin Center 内の iFrame で表示されない可能性があります。 これの詳細については、こちらを参照してください。