是否可通过CSS选择器选中UMAP iframe内部元素并修改其样式？

问题结论 #

父页面的CSS选择器无法直接选中跨域iframe内部的元素，这是浏览器同源策略的强制性安全限制，目的是避免跨站点的恶意DOM操作和数据窃取，没有通用的绕过方案。

可行的实现方案 #

• 方案1：使用uMap官方自定义样式功能
  你可以直接进入uMap对应的地图编辑后台，找到「嵌入设置」中的「自定义CSS」配置项，将你本地验证通过的调整导航按钮位置的CSS代码粘贴到对应输入框，保存后重新生成嵌入iframe代码替换你站点当前的代码即可，修改的样式会随iframe加载自动生效。
• 方案2：自行渲染地图实现完全自定义
  uMap本身基于Leaflet地图库开发，你可以将当前地图的数据导出为GeoJSON格式，在自己的站点中直接引入Leaflet加载该GeoJSON数据渲染地图，所有控件的位置、样式都可以自由调整，完全不受iframe限制。

内容的提问来源于stack exchange，提问作者Benjamin