iframe要素に対して、親要素からCSSでスタイルをあてることができるかがわからなかったので調べた
結論、CSSでスタイルをあてることはできないが、JavaScriptctで操作することは可能
ただし、クロスオリジンに対する操作はブロックされるためJavaScriptでもiframeが同じサーバーでなければならない
JavaScriptで操作する場合はcontentWindow.document
を使う
以下のようにして、ドキュメントにアクセスし、class属性を制御することでスタイルを変更することはできそう
const item = sub.contentWindow.document.getElementById("div1"); item.classList.remove('class1'); item.classList.add('class2');
親ページとiframeでやりとりをしたい場合はpostMessage
を使う
ちなみに、Google I/O 2021 でクロスオリジンのドキュメント埋め込みはreadonlyの場合でもデフォルト禁止するかもしれないという話しがあり、今後はオプトインでクロスオリジンの埋め込みをする必要があるかもしれない