barbaのイベント後処理がアドセンスエラーで止まるので力技対応

2020年 2月 8日  2020年 2月 8日

barbaのイベント後処理がアドセンスエラーで止まるので力技対応

barba.js採用しているサイトで、アドセンスを有効にしたら、ロード後に起動するはずのJSが起動しなくなる事象が起こりました。

こういうときはアレだ。力技です!

Docの変更を検知して強制的に処理を動かす

変更前のコード

JavaScript

barba.init({
        transitions: [{
            afterEnter() {
                // 直後に動かすもの。 
            },
            after() {
                // 全て書き換え後動くもの
            }
        }]
    });

HTML

<div id="barba-wrapper" class="column is-8 kadlu-bgcolor1" data-barba="wrapper">
                <div class="barba-container" data-barba="container" data-barba-namespace="home">
                    こんてんつ
                </div>
            </div>

「直後に動かすもの」を動かそうとしていたのですが、アドセンスがエラーとなってしまい、その処理が登録できなかったようです。

変更後のコード

barba.init();
//----------
    //アドセンスがバグった場合barbaが機能しないので…力技実装
    //----------

    // 監視ターゲットの取得
    const target = document.getElementById('barba-wrapper');

    // オブザーバーの作成
    const observer = new MutationObserver(records => {
        // 変化が発生したときの処理を記述
    });

    // 監視の開始
    observer.observe(target, {
        childList: true
    });

idを使用してHTMLエレメントを拾い、MutationObserverで変化を監視。

変化がアレばメソッドを動かすようにしてみました。