#javascript #html #iframe
Вопрос:
Я хочу получить размер содержимого iframe, в котором есть несколько <script> тегов. Эти <script> файлы динамически отображают дополнительный контент.
Вот кодовый код: https://codepen.io/ygygy/pen/YzQpdoV?editors=1010. (Вы можете использовать переменные instagram twitter для визуализации.)
Можно ли получить такой размер контента? Я не хочу конкретного ответа, такого как использование document.getElementsByClassName("twitter-tweet") .
Комментарии:
1. Если вы встраиваете эти социальные плагины с помощью сценариев, предоставляемых сетями, то iframes обычно динамически изменяют размер, чтобы соответствовать их содержимому. Итак, в какой конкретной ситуации / для чего вам нужно сейчас запрашивать высоту? Если вы не хотите полагаться на какие-либо конкретные методы, которые могут предоставить соответствующие SDK, чтобы явно запрашивать высоту или даже получать уведомления об изменениях, то вы, вероятно, не сможете сделать больше, чем «опросить» эти iframes для их текущей высоты в интервале (или, возможно, через сервер мутаций).
2. это примерно та же политика происхождения или CORS. вы не можете получить доступ к контенту другого происхождения., например, когда вы используете iframe для доступа к контенту из другого sosmed или google или чего-то, что вам не принадлежит. прочтите это : developer.mozilla.org/en-US/docs/Web/Security/…
3. но если исходный iframe имеет то же происхождение. Вы можете использовать :
document.getElementById("myFrame").contentWindow.document.getElementById('elmID')
Ответ №1:
вы можете сделать это с Element.getBoundingClientRect() помощью см. Более подробную информацию здесь
чтобы получить неизвестный элемент, оберните его перед записью в документ с помощью div с известным идентификатором, например
doc.write(`<div id='my-div'>${instagram}</div>`);
и затем
document.getElementsById("my-div").getBoundingClientRect()
Комментарии:
1. Я знаю, но что, если имя класса уродливо? Например,
a9H2csk. Как мы можем получить нужный размер?2. Я имею в виду, что ваш ответ слишком конкретен.
3. это зависит от того, какой фреймворк вы используете, или вы используете ваниль, но другой вариант-выбрать элемент по одному из атрибутов, которые вы знаете, например, href
document.querySelector(a[href="https://example.org"]);4. когда я говорю о ссылке, я имею в виду это reactjs.org/docs/refs-and-the-dom.html
5. Хм, я знаю, о чем ты говоришь, но это еще одна проблема. Я думаю, вам нужно проверить ссылку на кодовую ссылку и попытаться решить ситуацию.