模态框加载高德地图时，遇到的加载失败问题
模态框加载高德地图时，遇到的加载失败问题
本文中将简单说一下[bootstrap][6]框架中模态框在实际应用中遇到的问题及解决方案：
Qusetion
项目中使用[bootstrap][6]模态框，当点击按钮触发模态框后，在模态框中加载一个新页面，要求新页面加载出高德地图
代码如下：
index.html页面代码
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>主页面title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery-2.1.1.js">script>
<script src="js/bootstrap.min.js">script>
head>
<body>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">div>
<script type="text/javascript">
$(function(){
$('#myModal').load('content.html');
})
script>
body>
html>content.html页面代码
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>内容页面title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js">script>
<script src="http://webapi.amap.com/maps?v=1.4.1&key=c105406d9f035fb806c671e12dc75db5">script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js">script>
<style>
#container {height:100%}
style>
head>
<body>
<div id="container">div>
<script type="text/javascript">
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11,
center: [125.31166, 43.861915]
});
// 实例化点标记
function addMarker(lat,lon) {
var marker = new AMap.Marker({
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: [lon, lat]
});
marker.setMap(map);
}
script>
body>
html>Case
代码运行后，发现地图未加载出来。console控制台未报错，经判断应该是js加载过程中出现问题。进行简单调整后，解决问题。
Answer
将content.html文件中引入的外部文件，放入index.html中进行引入，经实践，解决问题！
代码如下：index.html页面代码
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>主页面title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="js/jquery-2.1.1.js">script>
<script src="js/bootstrap.min.js">script>
<script src="http://cache.amap.com/lbs/static/es5.min.js">script>
<script src="http://webapi.amap.com/maps?v=1.4.1&key=c105406d9f035fb806c671e12dc75db5">script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js">script>
head>
<body>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">div>
<script type="text/javascript">
$(function(){
$('#myModal').load('content.html');
})
script>
body>
html>content.html页面代码
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>内容页面title>
<style>
#container {height:100%}
style>
head>
<body>
<div id="container">div>
<script type="text/javascript">
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11,
center: [125.31166, 43.861915]
});
// 实例化点标记
function addMarker(lat,lon) {
var marker = new AMap.Marker({
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: [lon, lat]
});
marker.setMap(map);
}
script>
body>
html>Summary
此问题的发生与浏览器的读取机制有关，具体如下：
Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：
1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，
服务器返回html文件；
2. 浏览器开始载入html代码，发现head标签内有一个link标签引用外部CSS文件；
3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
4. 浏览器继续载入html中body部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
5. 浏览器在代码中发现一个img标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
7. 浏览器发现了一个包含一行Javascript代码的script标签，赶快运行它；
8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个div（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
9. 终于等到了/html的到来，浏览器泪流满面……
10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下link标签的CSS路径；
11. 浏览器召集了在座的各位div，span，ul，，li们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请
求了新的CSS文件，重新渲染页面。
Quote
本文末尾引用了一部分【浏览器的渲染机制解释】，来自神奇的百度搜索。