有没有办法通过 UMAP iframe 中的 CSS 元素进行选择？答案

【问题标题】：Is there a way to select via CSS elements inside UMAP iframe?有没有办法通过 UMAP iframe 中的 CSS 元素进行选择？
【发布时间】：2025-12-10 05:10:01
【问题描述】：

我正在我的网站中显示 uMap 地图。这里是：

<iframe id="umapiframe" class="iframe-umap" width="100%" height="300px" frameborder="0" allowfullscreen src="//umap.openstreetmap.fr/fr/map/agroavenir_665397?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=none&captionBar=false"></iframe>

它实际上看起来很不错，除了我真的想改变一些里面的 CSS。在这里，我想将导航按钮替换为除顶部/左侧之外的底部/右侧角落：

如您所见，在第二张图片中，我已经能够在本地修改 CSS 以查看潜在的结果，这实际上正是我想要的！

但该元素实际上位于 iframe 文档中，通过它，我无法在我的 css 文件中访问我想要访问的元素。

我有点沮丧，不能把这种东西永久化，完美地展示在我面前……

有没有办法通过 CSS 选择器访问这个 iframe 的内部？或者，通过其他方式，将这些元素移动到另一个角落？

感谢阅读

【问题讨论】：

标签： javascript css google-maps iframe selector

【解决方案1】：

您可以使用以下代码在 iframe 中获取元素：

const iframe = document.querySelector(/**iframe selector**/)
iframe.contentWindow.document.querySelector(/**element selector**/)

然后用js设置样式

Get element from within an iFrame

【讨论】：

【解决方案2】：

据我所知，使用 CSS 您只能选择同一文档中的类，而 iframe 是一个全新的文档，所以答案是您不能。也许您可以尝试使用 javascript 来定位它。

代码示例：

document.querySelector('iframe').contentDocument.body.querySelector('#some-element').style.background-color = 'red';

来源：https://www.py4u.net/discuss/1050889

【讨论】：