Если ваш iframe из другого домена, вам не повезло. По своей сути главная страница не может напрямую манипулировать фреймами из другого домена, поскольку это было бы огромной проблемой безопасности. Например, можно открыть страницу в iframe на amazon.com, нажать «добавить в корзину» и нажать «купить». Или он может отслеживать формы в iframe, отслеживая имя пользователя и пароль пользователя, когда они входят в свой банк. Вот почему, если дочерняя и родительская страницы не находятся в одном домене, вы не можете получить доступ к дочернему элементу из родительского (или наоборот)
Итак, сначала вам нужно ответить на вопрос: является ли содержимое вашего iframe изтот же домен?
Если ваш iframe принадлежит тому же домену, вам нужно подождать, пока загрузится iframe, прежде чем пытаться получить доступ к его содержимому.
<!-- main.html -->
<body>
<iframe id="childFrame"></iframe>
</body>
<script>
const iframe = document.getElementById("childFrame");
iframe.onload = run;
iframe.src="child.html";
function run() {
const childDocument = iframe.contentWindow.document;
const canvas = childDocument.getElementById("map-canvas");
canvas.addEventListener('click', function (e) {
console.log('#### DEBUG EVENT: ', e);
});
}
</script>
<!-- child.html -->
<p>
click in side rect
</p>
<canvas id="map-canvas" width="200" height="50" style="border: 1px solid black"></canvas>
пример
Если ваш iframe принадлежит другому домену, тогда я знаю, что единственное решение, если создатель содержимого этого iframe предлагает API для манипулирования содержимым iframe. Например, Google maps предлагает API для управления картами . Если страница, которую вы пытаетесь отобразить, не предлагает API или они предлагают, но не выполняют то, что вам нужно, то решения не существует.