web-dev-qa-db-ja.com

要素が存在するまで待つ方法は？

私はChromeで拡張機能に取り組んでいます、そして私は疑問に思います：要素がいつ出現するかを知るための最良の方法は何ですか？単純なJavaScriptを使用して、要素が存在するまでチェックする間隔で、またはjQueryにこれを行う簡単な方法がありますか？

javascriptjquerygoogle-chromegoogle-chrome-extension
200
mattsven

パフォーマンス上の問題から、DOMNodeInsertedは他のDOM変換イベントと共に廃止予定です - 推奨される方法は、DOMを監視するために MutationObserver を使用することです。それは新しいブラウザでしかサポートされていないので、DOMNodeInsertedが利用できない場合はMutationObserverに頼るべきです。

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (!mutation.addedNodes) return

    for (var i = 0; i < mutation.addedNodes.length; i++) {
      // do things to your newly added nodes here
      var node = mutation.addedNodes[i]
    }
  })
})

observer.observe(document.body, {
    childList: true
  , subtree: true
  , attributes: false
  , characterData: false
})

// stop watching using:
observer.disconnect()
128
hughsk

私はこれと同じ問題を抱えていたので、私は先に行き、それのために プラグイン を書きました。

$(selector).waitUntilExists(function);

コード：

;(function ($, window) {

var intervals = {};
var removeListener = function(selector) {

    if (intervals[selector]) {

        window.clearInterval(intervals[selector]);
        intervals[selector] = null;
    }
};
var found = 'waitUntilExists.found';

/**
 * @function
 * @property {object} jQuery plugin which runs handler function once specified
 *           element is inserted into the DOM
 * @param {function|string} handler 
 *            A function to execute at the time when the element is inserted or 
 *            string "remove" to remove the listener from the given selector
 * @param {bool} shouldRunHandlerOnce 
 *            Optional: if true, handler is unbound after its first invocation
 * @example jQuery(selector).waitUntilExists(function);
 */

$.fn.waitUntilExists = function(handler, shouldRunHandlerOnce, isChild) {

    var selector = this.selector;
    var $this = $(selector);
    var $elements = $this.not(function() { return $(this).data(found); });

    if (handler === 'remove') {

        // Hijack and remove interval immediately if the code requests
        removeListener(selector);
    }
    else {

        // Run the handler on all found elements and mark as found
        $elements.each(handler).data(found, true);

        if (shouldRunHandlerOnce && $this.length) {

            // Element was found, implying the handler already ran for all 
            // matched elements
            removeListener(selector);
        }
        else if (!isChild) {

            // If this is a recurring search or if the target has not yet been 
            // found, create an interval to continue searching for the target
            intervals[selector] = window.setInterval(function () {

                $this.waitUntilExists(handler, shouldRunHandlerOnce, true);
            }, 500);
        }
    }

    return $this;
};

}(jQuery, window));
109
Ryan Lester

これは要素の表示を待つためのコアJavaScript関数です。

パラメーター：

  1. selector：この関数は要素$ {selector}を探します

  2. time：この関数は、この要素が$ {time}ミリ秒ごとに存在するかどうかを確認します。

    function waitForElementToDisplay(selector, time) {
        if(document.querySelector(selector)!=null) {
            alert("The element is displayed, you can put your code instead of this alert.")
            return;
        }
        else {
            setTimeout(function() {
                waitForElementToDisplay(selector, time);
            }, time);
        }
    }

例として、selector="#div1"とtime=5000を設定すると、5000ミリ秒ごとにid="div1"を持つHTMLタグが検索されます。

61
Etienne Tonnelier

新しい要素がDOMに追加されるたびに発生するDOMNodeInsertedイベントまたはDOMSubtreeModifiedイベントを監視できます。

新しい要素がいつ作成されるかを検出する LiveQuery jQueryプラグインもあります。

$("#future_element").livequery(function(){
    //element created
});
24
serg

できるよ

$('#yourelement').ready(function() {

});

これは、サーバーから要求されたときに要素がDOMに存在する場合にのみ機能することに注意してください。要素がJavaScriptを介して動的に追加されている場合は、機能しません。他の回答を調べる必要があるかもしれません。

21
Splynx

このアプローチを使用して、要素が表示されるのを待つので、その後他の機能を実行できます。

doTheRestOfTheStuff(parameters)関数は、IDがthe_Element_IDの要素が現れた後、またはロードが終了した後にのみ呼び出されるべきだとしましょう。

var existCondition = setInterval(function() {
 if ($('#the_Element_ID').length) {
    console.log("Exists!");
    clearInterval(existCondition);
    doTheRestOfTheStuff(parameters);
 }
}, 100); // check every 100ms
15
prime

JQueryを使った簡単なアプローチのために私はこれがうまくいくことを発見しました：

  // Wait for element to exist.
  function elementLoaded(el, cb) {
    if ($(el).length) {
      // Element is now loaded.
      cb($(el));
    } else {
      // Repeat every 500ms.
      setTimeout(function() {
        elementLoaded(el, cb)
      }, 500);
    }
  };

  elementLoaded('.element-selector', function(el) {
    // Element is ready to use.
    el.click(function() {
      alert("You just clicked a dynamically inserted element");
    });
  });

ここでは、500msごとに要素がロードされているかどうかを確認しています。ロードされている場合は、それを使用できます。

これは、ドキュメントに動的に追加された要素にクリックハンドラを追加する場合に特に便利です。

9
Hedley Smith

insertQuery ライブラリはどうですか？

selectionQueryは、要素が作成されたときにコールバックを実行するために指定されたセレクターにアタッチされたCSS Animationコールバックを使用します。このメソッドを使用すると、初回ではなく要素が作成されたときにコールバックを実行できます。

Githubから：

ノードが現れるのを捕らえるための非DOMイベントの方法。そしてそれはセレクタを使います。

ブラウザのサポートを広げるためだけのものではありません。特定の点ではDOMMutationObserverよりも優れている可能性があります。

どうして？

  • DOMイベントはブラウザを遅くし、挿入クエリはしないため
  • DOM Mutation Observerは挿入クエリよりもブラウザサポートが少ないため
  • 挿入クエリを使用すると、パフォーマンスのオーバーヘッドなしにセレクタを使用してDOMの変更をフィルタリングできます。

広範囲なサポート！

IE10以降、その他ほとんどのもの（モバイルを含む）

8
b3wii

これがMutationObserverの細かいラッパーとして機能する関数です。唯一の要件は、ブラウザがMutationObserverをサポートしていることです。 JQueryには依存しません。実例を見るために下記のスニペットを実行してください。

function waitForMutation(parentNode, isMatchFunc, handlerFunc, observeSubtree, disconnectAfterMatch) {
  var defaultIfUndefined = function(val, defaultVal) {
    return (typeof val === "undefined") ? defaultVal : val;
  };

  observeSubtree = defaultIfUndefined(observeSubtree, false);
  disconnectAfterMatch = defaultIfUndefined(disconnectAfterMatch, false);

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.addedNodes) {
        for (var i = 0; i < mutation.addedNodes.length; i++) {
          var node = mutation.addedNodes[i];
          if (isMatchFunc(node)) {
            handlerFunc(node);
            if (disconnectAfterMatch) observer.disconnect();
          };
        }
      }
    });
  });

  observer.observe(parentNode, {
    childList: true,
    attributes: false,
    characterData: false,
    subtree: observeSubtree
  });
}

// Example
waitForMutation(
  // parentNode: Root node to observe. If the mutation you're looking for
  // might not occur directly below parentNode, pass 'true' to the
  // observeSubtree parameter.
  document.getElementById("outerContent"),
  // isMatchFunc: Function to identify a match. If it returns true,
  // handlerFunc will run.
  // MutationObserver only fires once per mutation, not once for every node
  // inside the mutation. If the element we're looking for is a child of
  // the newly-added element, we need to use something like
  // node.querySelector() to find it.
  function(node) {
    return node.querySelector(".foo") !== null;
  },
  // handlerFunc: Handler.
  function(node) {
    var elem = document.createElement("div");
    elem.appendChild(document.createTextNode("Added node (" + node.innerText + ")"));
    document.getElementById("log").appendChild(elem);
  },
  // observeSubtree
  true,
  // disconnectAfterMatch: If this is true the hanlerFunc will only run on
  // the first time that isMatchFunc returns true. If it's false, the handler
  // will continue to fire on matches.
  false);

// Set up UI. Using JQuery here for convenience.

$outerContent = $("#outerContent");
$innerContent = $("#innerContent");

$("#addOuter").on("click", function() {
  var newNode = $("<div><span class='foo'>Outer</span></div>");
  $outerContent.append(newNode);
});
$("#addInner").on("click", function() {
  var newNode = $("<div><span class='foo'>Inner</span></div>");
  $innerContent.append(newNode);
});
.content {
  padding: 1em;
  border: solid 1px black;
  overflow-y: auto;
}
#innerContent {
  height: 100px;
}
#outerContent {
  height: 200px;
}
#log {
  font-family: Courier;
  font-size: 10pt;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Create some mutations</h2>
<div id="main">
  <button id="addOuter">Add outer node</button>
  <button id="addInner">Add inner node</button>
  <div class="content" id="outerContent">
    <div class="content" id="innerContent"></div>
  </div>
</div>
<h2>Log</h2>
<div id="log"></div>
5
Ivan Karajas

これがVanilla JavascriptでのPromise-returnソリューションです（面倒なコールバックは不要です）。デフォルトでは200msごとにチェックします。

function waitFor(selector) {
    return new Promise(function (res, rej) {
        waitForElementToDisplay(selector, 200);
        function waitForElementToDisplay(selector, time) {
            if (document.querySelector(selector) != null) {
                res(document.querySelector(selector));
            }
            else {
                setTimeout(function () {
                    waitForElementToDisplay(selector, time);
                }, time);
            }
        }
    });
}
4
blaster

これはあなたが何かを待つことを可能にする純粋なJavascript関数です。 CPUリソースを少なくするには、間隔を長く設定してください。

/**
 * @brief Wait for something to be ready before triggering a timeout
 * @param {callback} isready Function which returns true when the thing we're waiting for has happened
 * @param {callback} success Function to call when the thing is ready
 * @param {callback} error Function to call if we time out before the event becomes ready
 * @param {int} count Number of times to retry the timeout (default 300 or 6s)
 * @param {int} interval Number of milliseconds to wait between attempts (default 20ms)
 */
function waitUntil(isready, success, error, count, interval){
    if (count === undefined) {
        count = 300;
    }
    if (interval === undefined) {
        interval = 20;
    }
    if (isready()) {
        success();
        return;
    }
    // The call back isn't ready. We need to wait for it
    setTimeout(function(){
        if (!count) {
            // We have run out of retries
            if (error !== undefined) {
                error();
            }
        } else {
            // Try again
            waitUntil(isready, success, error, count -1, interval);
        }
    }, interval);
}

たとえばjQueryでこれを呼び出すには、次のようにします。

waitUntil(function(){
    return $('#myelement').length > 0;
}, function(){
    alert("myelement now exists");
}, function(){
    alert("I'm bored. I give up.");
});
3
xgretsch

MutationObserverを使用したわかりやすい例：

new MutationObserver( mutation => {
    if (!mutation.addedNodes) return
    mutation.addedNodes.forEach( node => {
        // do stuff with node
    })
})
2
Zaz

Promiseを返し、タイムアウトを使用できるようにするソリューション（compatible IE 11+）：

"use strict";

function waitUntilElementLoaded(selector) {
    var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

    var start = performance.now();
    var now = 0;

    return new Promise(function (resolve, reject) {
        var interval = setInterval(function () {
            var element = document.querySelector(selector);

            if (element instanceof HTMLElement) {
                clearInterval(interval);

                resolve();
            }

            now = performance.now();

            if (now - start >= timeout) {
                reject("Could not find the element " + selector + " within " + timeout + " ms");
            }
        }, 100);
    });
}

"use strict";

function waitUntilElementsLoaded(selector) {
    var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

    var start = performance.now();
    var now = 0;

    return new Promise(function (resolve, reject) {
        var interval = setInterval(function () {
            var elements = document.querySelectorAll(selector);

            if (elements instanceof NodeList) {
                clearInterval(interval);

                resolve(elements);
            }

            now = performance.now();

            if (now - start >= timeout) {
                reject("Could not find elements " + selector + " within " + timeout + " ms");
            }
        }, 100);
    });
}

例：

waitUntilElementLoaded('#message', 800).then(function(element) {
    // element found and available

    element.innerHTML = '...';
}).catch(function() {
    // element not found within 800 milliseconds
});

waitUntilElementsLoaded('.message', 10000).then(function(elements) {
    for(const element of elements) {
        // ....
    }
}).catch(function(error) {
    // elements not found withing 10 seconds
});

要素のリストと単一の要素の両方に対して機能します。

1
Anwar

必要なセレクターを追加するだけです。要素が見つかったら、コールバック関数でアクセスすることができます。

const waitUntilElementExists = (selector, callback) => {
const el = document.querySelector(selector);

if (el){
    return callback(el);
}

setTimeout(() => waitUntilElementExists(selector, callback), 500);
}

waitUntilElementExists('.wait-for-me', (el) => console.log(el));
0
PossessWithin

しばらく待つこと（タイムアウト）を停止する場合は、次のjQueryが機能します。 10秒後にタイムアウトします。名前で入力を選択する必要があり、他のソリューションの実装に問題があったため、純粋なJSではなくこのコードを使用する必要がありました。

 // Wait for element to exist.

    function imageLoaded(el, cb,time) {

        if ($(el).length) {
            // Element is now loaded.

            cb($(el));

            var imageInput =  $('input[name=product\\[image_location\\]]');
            console.log(imageInput);

        } else if(time < 10000) {
            // Repeat every 500ms.
            setTimeout(function() {
               time = time+500;

                imageLoaded(el, cb, time)
            }, 500);
        }
    };

    var time = 500;

    imageLoaded('input[name=product\\[image_location\\]]', function(el) {

     //do stuff here 

     },time);
0
S-Thomas