web-dev-qa-db-ja.com

ページが読み込まれる前にTampermonkeyスクリプトが実行される

セクションをHTMLページから非表示にする必要があります。

<h1 data-ng-show="!menuPinned &amp;&amp; !isSaaS" class="logo floatLeft" aria-hidden="false"><span>XXX&nbsp;</span><span style="font-weight: bold;">XXX&nbsp;</span><span>XXXXX</span></h1>

次のコードはChrome dev。toolsで正常に動作します

var ibmlogo = document.querySelectorAll('h1.logo.floatLeft');
ibmlogo[1].remove();

しかし、スクリプトをアクティブにしてページをロードすると、セクション（h1）が消えません。これは、スクリプトの実行時にDOMの読み込みがまだ完了していないため、スクリプトがセレクターを見つけられないためだと思います。

私はさまざまなこと（例：window.onLoad）を試しましたが、それでも私のスクリプトは効果的ではありません。最後の試行（失敗）は次のとおりです。

var logo = document.querySelectorAll('h1.logo.floatLeft');
logo.onload = function() {removeLogo()};

function removeLogo(){
    console.log("### logo array lenght: " + logo.length);
    logo[1].remove();
};
javascripthtmltampermonkey
12
Giovanni Vigorelli

必須：

  • @ run-at：document-start userscriptメタブロック内。

    // ==UserScript==
..............
// @run-at        document-start
..............
// ==/UserScript==

ここで、上記のオプションは次のとおりです。

  1. ロゴを隠すスタイルを挿入するだけです：

    (document.head || document.documentElement).insertAdjacentHTML('beforeend',
    '<style>h1.logo.floatLeft { display: none!important; }</style>');

  2. MutationObserver を使用して、要素がDOMに追加された直後に要素を検出して削除します。

    new MutationObserver(function(mutations) {
    // check at least two H1 exist using the extremely fast getElementsByTagName
    // which is faster than enumerating all the added nodes in mutations
    if (document.getElementsByTagName('h1')[1]) {
        var ibmlogo = document.querySelectorAll('h1.logo.floatLeft')[1];
        if (ibmlogo) {
            ibmlogo.remove();
            this.disconnect(); // disconnect the observer
        }
    }
}).observe(document, {childList: true, subtree: true});
// the above observes added/removed nodes on all descendants recursively
26
wOxxOm