Есть ли способ показать пост в Instagram во всплывающем окне?

Question

Я пытаюсь использовать функцию «Вставить» в Instagram в качестве источника контента во всплывающем окне Leaflet. Скрипт встраивания работает неправильно. Во всплывающем окне отображается логотип Instagram и ссылка, по которой можно щелкнуть, чтобы открыть сообщение.

Я читал, что это вызвано сценарием встраивания, выполняющимся до загрузки HTML-документа в документ, который в данном случае является всплывающим содержимым. Я изменил встроенный код из Instagram, чтобы он выполнялся в «defer» вместо «async», но это не имело никакого значения.

Почему код для вставки instagram показывает только значок instagram, а не изображение?

Похоже, ключ к выполнению этой работы - запуск скрипта после всплывающего окна. контент загружается листовкой. Я довольно плохо знаком с листовкой и javaScript и не понял, как это сделать.

Я пытался использовать iframe и ссылку Instagram вместо встроенного кода, но заголовки Instagram включают X-Frame-Options, для которых установлено значение sameorigin, поэтому Chrome отказывается отображать его.

Вот конкретное всплывающее окно маркера, созданное путем переноса кода встраивания непосредственно из выпадающего меню Instagram в JavaScript. Я удалил все элементы блочной цитаты для ясности, но был бы рад добавить их обратно, если это поможет.

L.marker([87.1489,132.30095], { title: 'Hot meal', icon: postMarker, closeButton: false, zIndexOffset: -3400 }).bindPopup('<table class="popup"><td class="popup"><blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/B4VIm0iBvrA/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"> .... </blockquote> <script defer src="//www.instagram.com/embed.js"></script></td></table>' , {closeOnClick: true, closeButton: true, maxWidth: "auto"})

Вы можете увидеть это в действии здесь: https://petrichor.mynetgear.com/map.html Естьздесь четыре значка «камера», где первые два - просто изображения, третий - встроенное всплывающее окно Instagram, а четвертый - iframe, содержащий ссылку в Instagram.

Я успешно видел сообщения Instagram, размещенные на веб-сайтах. и я видел изображения из Instagram во всплывающих окнах. Я не видел пример целого поста в Instagram, используемого в качестве содержимого всплывающего окна.