Google Adsenseで勝手にCSSスタイルに注入されてしまう「height: auto !important」をMutationObserverで抑える

AngularのようなJSフレームワークを使ったフロントエンド開発でとあるウェブサイトを作成しているときに、Google Adsenseのスクリプトが読み込まれるたびに、ページのデザインレイアウトが若干崩れることに気が付きました。
これまで変化がわずかであったため、とりあえず見過ごしてきたわけですが、Adsenseのスクリプトは広告ユニットが貼り付けてあるDOM要素なら、

問答無用で「height: auto !important;」を大量注入してくれます

。

ほとんどの場合にはcssスタイルで

height: auto

されても大きく問題なるようなことはないのです。
ただしSPAでHTML要素を厳密に高さ調整したいときに、いきなり

height: auto

されると困るケースもあります。
そんな外部から呼び出してつかうJavascriptスクリプトによってcssスタイルに影響が出てしまう場合に、ブラウザ標準で使えるようになったDOM APIの一つである

「MutationObserver」

を使って解決してみようと思います。

参考｜MutationObserver

MutationObserverを使ったDOMの監視

「MutationObserver API」

を使うことで、指定したDOM要素へ変更が加えられたことを監視することができます。
例えばAdsenseのように外部から提供されたスクリプトは

index.html

の

<body>...</body>

タグのどこかに以下のようなスニペットを貼り付けることでウェブページのCSSスタイルに直接変更を加えてきます。

開く/閉じる

            ...
<body>
    ...
    <script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async></script> 
    ...
</body>

これが読み込まれた時点で、せっかくのページレイアウトが崩れてしまう可能性があります。
ということで、スクリプトにはスクリプトをぶつけることで勝手に挿入されてしまう

height: auto

に対抗してみます。
具体的には以下のようなスクリプトを

index.html

に挿入します。

開く/閉じる

            ...
<script>
    document.querySelectorAll('.mut-height-guard').forEach((target) => {
        const heightChangeObserver = new MutationObserver(() => {
            target.style.height = "";
        });
        heightChangeObserver.observe(target, {
            attriblutes: true,
            attributeFilter: ['style']
        });
    });
</script>
...

後は、勝手に

height: auto !important;

を入れられて、レイアウトが崩れてしまいそうな要素に、

class="mut-height-guard"

を付与していきましょう。
例えば、Adsenseを呼び出すことで、サイドバーの要素のレイアウトが乱される場合があったとしましょう。
すると、以下のように要素の

class

を修正します。

開く/閉じる

            ...
    <article>
        <div class="mainWrap">
            ...ページのメインの内容(height: autoで問題ない要素)
        </div>
        <div class="sideMenu mut-height-guard">
            ...☝サイドバー(height: autoになってほしくない要素)に指定する
        </div>
    </article>
...

特に

height: auto !important;

を入れられても問題のない要素であれば

class="mut-height-guard"

を指定する必要はないでしょう。
とりあえずこれで、ウェブページのレイアウトが崩れなくなれば処置の完了です。

まとめ

今回は、DOMの変化を監視して処理できる

「MutationObserver」

を使った応用例を紹介してみました。
MutationObserverを使えば、今回のように外部スクリプトを呼び出してCSSスタイルが変化してしまうのを防ぐことも出来ますし、iframeでの外部リソース呼び出しでも柔軟に表示サイズを変えられるなど、結構使いどころは多いです。
困ったときには、MutationObserverが使えないか一度検討してみてはどうでしょうか。

参考サイト

Fixing Adsense Injecting 'height: auto !important' into scrolled Containers