Я изучаю скрипты Google и создал простое веб-приложение. Используя его (на стороне клиента), в Google наблюдалось поведение ползучести (для меня) Chrome навигатор:
Пытался получить элемент через консоль с помощью команды document.getElementById("ID of a active Element"), элемент не был найден. Но после анализа его с помощью инструмента инспектора (ctrl + c в FireFox и Chrome и убедившись, что такой идентификатор существует), элемент становится доступным и, просто повторяя команду выборки (document.getElementById("ID of a active Element")) , происходит ожидаемый возврат, значит, функция работает правильно, находит элемент. Я понятия не имею, почему и как должно происходить такое поведение.
Вопросы : Почему такое поведение? Как я могу безопасно создать или избежать этого?
Системная информация : Linux debian 4.9.0-11-amd64 # 1 SMP Debian 4.9.189-3 + deb9u2 (2019-11 -11) x86_64 GNU / Linux
PS : В FireFox он всегда возвращает null, даже после проверки элемента! Поведение Chrome стабильно (не находит до проверки, находит после).
Заранее спасибо.
Ссылка, если вы хотите испытать такое поведение
Ниже код страницы выше. Функция doGet возвращает только эту страницу. Больше ничего нет.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body{ display: grid; align-items: center; }
button { padding-left: 40%;padding-right: 40%; }
</style>
</head>
<body>
<h1> Thank you for your support! </h1>
<p> The button below has ID <strong>bbb</strong>. Try to find it in console with the command <span >document.getElementById("bbb")</span>. In Chrome, you will get null. But, after inspect the element (ctrl+c and click over it), you will get the button.</p>
<button id="bbb"> My ID is bbb - click on me to copy the mentioned command above. </button>
<p> If you try <strong>document.body.getElementsByTagName("IFRAME")[0].contentWindow.document.getElementById('bbb')</strong>, you will fail due to lack of permissions</p>
<button id="fff"> My ID is fff - click on me to copy the mentioned command above.</button>
</body>
<script>
//the code of copyToClipboard was copied from https://www.30secondsofcode.org/blog/s/copy-text-to-clipboard-with-javascript only used to illustrate this question.
const copyToClipboard = str => {
const el = document.createElement('textarea');
el.value = str;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
};
document.getElementsByTagName("BUTTON")[0].onclick = function(){ copyToClipboard( 'document.getElementById("bbb")' )};
document.getElementsByTagName("BUTTON")[1].onclick = function(){ copyToClipboard( 'document.body.getElementsByTagName("IFRAME")[0].contentWindow.document.getElementById("fff")' )};
</script>
</html>