频繁变化的iframe URL

Question

我想用 iframe 制作一个 url 经常更改的交互式地图。 url 会发生变化，因为它考虑了地图的参数（如坐标、激活的图层、缩放级别等）。一旦您在地图上导航，网址就会发生变化。我希望能够在 iframe 中与地图共享父页面，同时考虑到这些 url 更改。

带有参数值的 url 如下所示：

https://kartenn.region-bretagne.fr/kartoviz/?x=-179589&y=6124999&z=12.603072424400471&l=lycee&lb=osm1&config=demo/print.xml

该url中的参数值为：

x=-179589&y=6124999&z=12.603072424400471&l=lycee&lb=osm1

是否可以将这些参数值传递给父页面的url？或者还有其他的可能吗？

理想情况下，我希望避免每次 url 更改时都必须托管页面。

Answer 1

它们不是检测 iFrame 中 URL 变化的直接方法，但如果你在 iframe 中添加 JS，你可以做这样的事情。

const observeUrlChange = () => {
  let oldHref = document.location.href
  const body = document.querySelector("body")
  const observer = new MutationObserver(mutations => {
    if (oldHref !== document.location.href) {
      oldHref = document.location.href
      top.postMessage(document.location.href, '*')
    }
  })
  observer.observe(body, { childList: true, subtree: true })
}

window.onload = observeUrlChange

然后在父页面中您可以收到消息：

let iframeUrl

window.addEventListener("message", (event) => {
  iframeUrl = event.data
}, false)