我正在尝试使用Instagram的“嵌入”功能作为Leaflet弹出窗口中内容的来源。嵌入脚本无法正常工作。弹出窗口显示Instagram徽标和单击链接以打开帖子。
我已经读到这是由将HTML加载到文档之前运行的嵌入脚本引起的，本例中为弹出内容。我已经修改了Instagram中的嵌入式代码，使其以“延迟”而不是“异步”执行，但这没有任何区别。
Why is instagram embed code only showing an instagram icon,not the image?
在通过小叶加载弹出内容之后，执行此项工作的关键似乎在于运行脚本。我对Leaflet和JavaScript还是很陌生，还没有弄清楚如何做到这一点。
我确实尝试使用iframe和Instagram链接而不是嵌入式代码，但是Instagram标头包含设置为“ sameorigin”的X-Frame-Options，因此Chrome拒绝显示它。
这是通过将嵌入代码直接从Instagram GUI下拉列表迁移到JavaScript中而创建的特定标记弹出窗口。为了清楚起见，我已删除了blockquote元素之间的所有内容，但很乐意将它们重新添加回去。
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&utm_campaign=loading" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0.5),0 1px 10px 0 rgba(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弹出窗口，第四个是包含Instagram的iframe链接。
我已经看到Instagram成功地将Instagram帖子嵌入到网站中，并且已经在传单弹出窗口中看到Instagram图片。我还没有看到将整个Instagram帖子用作弹出窗口内容的示例。