前言：
最近做项目需要使用到腾讯位置服务（这个之后分享），其中用到了一个之前一直没用到的标签：＜iframe＞，一时居然不知道这个是干什么用的。今天分享一下。
下面这段代码是我用来测试地图的html代码，直接复制粘贴使用即可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>点击地图拾取POI</title>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
#mapContainer {
position: relative;
height: 100%;
width: 100%;
}
</style>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<body onl oad="init()">
<div id='mapContainer'></div>
<script>
var map;
function init() {
var drawContainer = document.getElementById('mapContainer');
var center = new TMap.LatLng(39.953416, 116.380945);
map = new TMap.Map(drawContainer, {
zoom: 13,
pitch: 40,
center: center
});
// 创建信息窗
let info = new TMap.InfoWindow({
map,
position: map.getCenter()
}).close();
map.on('click', (evt) => {
// 获取click事件返回的poi信息
let poi = evt.poi;
if (poi) {
// 拾取到POI
info.setContent(poi.name).setPosition(poi.latLng).open();
} else {
// 没有拾取到POI
info.close();
}
});
}
</script>
</body>
</html>效果大致是这样：
一、介绍<iframe>
iframe（内嵌框架）是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签，它可以在一个页面中显示来自其他页面的内容。在网页中，使用<iframe>标签可以将一个网页嵌套在另一个网页中，实现网页间的互联互通。
我的理解就是可以用这个标签实现将别人写好的网页直接引入到我们网站中进行使用，上面例子中的地图功能即使如此。
二、使用
<iframe src="URL"></iframe>这个标签有很多属性：（本人也没怎么用过，先记录一下）
备注：
（1）可以在iframe的src属性中使用查询参数（也称为URL参数）将数据传递到嵌入的页面
（2） postMessage()方法是一种用于在不同窗口或文档之间传递消息的通用方法，它可以实现跨域通信。在使用postMessage()方法时，需要在发送消息的窗口（发送方）和接收消息的窗口（接收方）中分别编写代码。（没有用过，改天试试，再分享一下效果）