iframe父组件调用子组件的方法’

在HTML语法中，可以通过给iframe设置name属性来给iframe命名，然后在父窗口中使用该名称来调用子窗口的方法。具体步骤如下：
1. 在iframe标签中设置name属性，例如：<iframe name="myFrame" src="child.html"></iframe>
2. 在父窗口中使用该名称来调用子窗口的方法，例如：myFrame.window.functionName();
其中，functionName()是子窗口中的方法名。在子窗口中定义该方法后，就可以在父窗口中通过上述方式来调用该方法了。

相关问题

vue iframe 方法调用

在Vue中使用iframe可以通过以下步骤进行方法调用：

1. 在Vue组件中，使用`<iframe>`标签来创建一个iframe元素，可以通过设置`src`属性来指定要加载的页面。
2. 在Vue组件中，可以通过`ref`属性给iframe元素添加一个引用，以便在Vue实例中访问该元素。
3. 在Vue实例中，可以通过`this.$refs`来访问iframe元素的引用。
4. 通过访问iframe元素的`contentWindow`属性，可以获取到iframe内部的window对象。
5. 通过获取到的window对象，可以调用其中的方法或者访问其中的属性。

下面是一个示例代码：

<template>
  <div>
    <iframe ref="myIframe" src="https://example.com"></iframe>
    <button @click="callIframeMethod">调用iframe方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    callIframeMethod() {
      const iframeWindow = this.$refs.myIframe.contentWindow;
      if (iframeWindow) {
        // 调用iframe内部的方法
        iframeWindow.myMethod();
      }
    }
  }
}
</script>

在上面的示例中，我们创建了一个包含一个iframe和一个按钮的Vue组件。当点击按钮时，会调用`callIframeMethod`方法。该方法通过`this.$refs.myIframe.contentWindow`获取到iframe内部的window对象，并调用其中的`myMethod`方法。

vue 腾讯地图地图选点组件iframe调用 反显地点

要在Vue中通过iframe调用腾讯地图地图选点组件，并实现反显地点，可以按照以下步骤进行：

1. 在Vue组件中添加一个iframe元素，并设置其src属性为腾讯地图地图选点组件的URL。同时，给iframe添加一个id，以便在后面的代码中可以通过id获取到iframe元素。

<template>
  <div>
    <iframe id="map-iframe" src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=YOUR_KEY"></iframe>
  </div>
</template>

2. 在Vue组件的mounted生命周期钩子中，给iframe添加一个load事件的监听器。当iframe加载完成后，通过postMessage向iframe发送一个消息，告诉它需要反显地点。

<script>
export default {
  mounted() {
    const iframe = document.getElementById("map-iframe");
    iframe.addEventListener("load", () => {
      const message = {
        type: "show",
        data: {
          latLng: {
            lat: 39.916527,
            lng: 116.397128
          }
        }
      };
      iframe.contentWindow.postMessage(message, "*");
    });
    window.addEventListener("message", event => {
      if (event.origin !== "https://apis.map.qq.com") {
        return;
      }
      if (event.data.type === "location") {
        const location = event.data.data;
        console.log(location);
      }
    });
  }
};
</script>

3. 在iframe中通过window.addEventListener监听父窗口发送的postMessage消息。当收到show类型的消息后，根据消息中的经纬度信息，在地图上显示一个标记点，并通过Geocoder逆地址解析功能获取反显地址信息。当用户点击标记点时，通过postMessage向父窗口发送一个消息，告诉它选中的地点信息。

<script>
window.addEventListener("message", event => {
  if (event.origin !== "https://apis.map.qq.com") {
    return;
  }
  if (event.data.type === "show") {
    const map = new qq.maps.Map(document.getElementById("map-container"), {
      center: new qq.maps.LatLng(event.data.data.latLng.lat, event.data.data.latLng.lng),
      zoom: 13
    });
    const marker = new qq.maps.Marker({
      position: new qq.maps.LatLng(event.data.data.latLng.lat, event.data.data.latLng.lng),
      map: map
    });
    const reverseGeocoder = new qq.maps.Geocoder({
      complete: result => {
        if (result.detail.addressComponents) {
          const address = result.detail.addressComponents;
          const location = {
            city: address.city,
            district: address.district,
            street: address.street,
            latLng: event.data.data.latLng
          };
          window.parent.postMessage({
            type: "location",
            data: location
          }, "*");
        }
      }
    });
    reverseGeocoder.getAddress(new qq.maps.LatLng(event.data.data.latLng.lat, event.data.data.latLng.lng));
    qq.maps.event.addListener(marker, "click", event => {
      const location = {
        city: marker.city,
        district: marker.district,
        street: marker.street,
        latLng: event.latLng
      };
      window.parent.postMessage({
        type: "location",
        data: location
      }, "*");
    });
  }
});
</script>

4. 在Vue组件的代码中，监听窗口的message事件，并根据接收到的消息类型进行处理。当收到location类型的消息时，获取选中的地点信息，并进行后续处理。

<script>
export default {
  mounted() {
    const iframe = document.getElementById("map-iframe");
    iframe.addEventListener("load", () => {
      const message = {
        type: "show",
        data: {
          latLng: {
            lat: 39.916527,
            lng: 116.397128
          }
        }
      };
      iframe.contentWindow.postMessage(message, "*");
    });
    window.addEventListener("message", event => {
      if (event.origin !== "https://apis.map.qq.com") {
        return;
      }
      if (event.data.type === "location") {
        const location = event.data.data;
        console.log(location);
      }
    });
  }
};
</script>

通过以上步骤，就可以在Vue中通过iframe调用腾讯地图地图选点组件，并实现反显地点的功能了。