首页如何给iframe地图组件添加点击事件完整代码

如何给iframe地图组件添加点击事件完整代码

时间: 2023-05-31 10:04:44 浏览: 124

下面是一个示例代码，其中`map`是一个`<iframe>`标签，`map`的`src`属性指向一个地图页面。 HTML代码： ```html <iframe id="map" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12084.719909912845!2d-122.431297!3d37.773972!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMznCsDQzJzEyLjkiTiAxMjLCsDEwJzE4LjQiVw!5e0!3m2!1sen!2sus!4v1566388842725!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe> ``` JavaScript代码： ```javascript // 获取iframe元素 var map = document.getElementById("map"); // 添加点击事件监听器 map.addEventListener("load", function() { var mapDoc = map.contentDocument || map.contentWindow.document; var mapElement = mapDoc.getElementsByTagName("body")[0]; mapElement.addEventListener("click", function(e) { // 处理点击事件 console.log("点击了地图"); }); }); ``` 上面的代码中，首先获取了`<iframe>`元素，并添加了`load`事件监听器。当地图页面加载完成后，会触发`load`事件。在`load`事件处理函数中，获取了`<iframe>`元素的`contentDocument`或`contentWindow.document`属性，可以访问地图页面的DOM结构。然后，找到地图页面的`<body>`元素，并添加了点击事件监听器。当点击地图时，会触发点击事件，可以在事件处理函数中处理点击事件。

阅读全文