Question

所以，我有一个正在处理的网页，客户希望嵌入的 Google 地图 iframe 在点击时打开 Google 地图页面。

由于这不是嵌入地图本身的默认行为，而且在 <a></a> 标记之间包装 iframe 也无济于事，我完全一无所知。

一个有问题的 iframe 的例子，我在它周围包裹了一个链接失败了：

<a href="https://goo.gl/maps/GsvZj4HWJwX1wc8fA" target="_blank">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1984.7094888859592!2d24.947179516385656!3d60.16898808196048!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46920bcef71de10f%3A0x398a145b94611a7!2sAleksanterinkatu%2C%20Helsinki!5e0!3m2!1sen!2sfi!4v1617862310335!5m2!1sen!2sfi" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</a>

我的问题是；如何将链接注入 iframe？就iframe的正常功能而言，我认为它是否被擦除无关紧要。

Answer 1

您可以在该 iframe 顶部创建一个不透明度为 0 的叠加（div），并将该叠加（div）放在您的地图链接中...（在您的文本编辑器中尝试此操作，它在这里不起作用）

.container{
      position: relative;
      width: min-content;
    }
.container .overlay{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0);
    }

 <div class="container">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1984.7094888859592!2d24.947179516385656!3d60.16898808196048!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46920bcef71de10f%3A0x398a145b94611a7!2sAleksanterinkatu%2C%20Helsinki!5e0!3m2!1sen!2sfi!4v1617862310335!5m2!1sen!2sfi" width="500" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
        
        <a href="https://goo.gl/maps/GsvZj4HWJwX1wc8fA" target="_blank"><div class="overlay"></div></a>
</div>

Answer 2

满足您的需求。

不要将链接用作大标记块的父级，否则会影响可访问性。
在您的 tabindex=1 上设置 iframe，即使通过键盘也可以聚焦。
为您的 iframe 分配一个 id
设置 data-href="your-link-to-maps"，这是一个自定义 HTML 属性，我们将在 javascript 中使用它。

最后，添加一个点击事件监听器。

function openMaps() {
    window.open(this.getAttribute('data-href'))
}

document.getElementById('my-iframe').addEventListener('click', openMaps)

有没有办法让 iframe 作为链接工作？

2 个答案: