【iframe】親要素からiframeに対してCSSが当てられるか

iframe要素に対して、親要素からCSSでスタイルをあてることができるかがわからなかったので調べた

結論、CSSでスタイルをあてることはできないが、JavaScriptctで操作することは可能

ただし、クロスオリジンに対する操作はブロックされるためJavaScriptでもiframeが同じサーバーでなければならない

JavaScriptで操作する場合はcontentWindow.documentを使う

developer.mozilla.org

以下のようにして、ドキュメントにアクセスし、class属性を制御することでスタイルを変更することはできそう

const item = sub.contentWindow.document.getElementById("div1");
item.classList.remove('class1');
item.classList.add('class2');

親ページとiframeでやりとりをしたい場合はpostMessageを使う

developer.mozilla.org

ちなみに、Google I/O 2021 でクロスオリジンのドキュメント埋め込みはreadonlyの場合でもデフォルト禁止するかもしれないという話しがあり、今後はオプトインでクロスオリジンの埋め込みをする必要があるかもしれない

uga-box.hatenablog.com