Loading Failure Problem in Modal Box Loading Goethe Map
In this paper, the problems and solutions of modal box in [bootstrap][6] frame in practical application will be briefly described.
Qusetion
In the project, [bootstrap][6] modal box is used. When the modal box is triggered by clicking a button, a new page is loaded in the modal box, requiring the new page to load the Golden Map.
The code is as follows:
index.html page code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Main page</title>
<!--External file introduction-->
<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 trigger mode box -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Start demonstrating the modal box</button>
<!-- Modal frame ( Modal) -->
<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 page code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Content page</title>
<!--External file introduction-->
<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>
<!--Loading map-->
<div id="container"></div>
<script type="text/javascript">
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11,
center: [125.31166, 43.861915]
});
// Instance Point Markup
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
When the code runs, it is found that the map is not loaded. The console console did not report any errors. It was judged that there was a problem in the process of loading js. After simple adjustment, solve the problem.
Answer
External files introduced in content.html file are introduced into index.html. After practice, the problem is solved!
The code is as follows:
index.html page code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Main page</title>
<!--External file introduction-->
<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 trigger mode box -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Start demonstrating the modal box</button>
<!-- Modal frame ( Modal) -->
<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 page code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Content page</title>
<style>
#container {height:100%}
</style>
</head>
<body>
<!--Loading map-->
<div id="container"></div>
<script type="text/javascript">
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11,
center: [125.31166, 43.861915]
});
// Instance Point Markup
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
The occurrence of this problem is related to the browser's reading mechanism, as follows:
Web pages run in a variety of browsers. The speed of browsers loading and rendering pages directly affects the user experience. In short, page rendering is the process that browsers display html code in the browser window according to the rules defined by CSS. Let's first get a general idea of how browsers work:
1. When the user enters the web address (assuming it is an html page and is visited for the first time), the browser makes a request to the server.
The server returns the html file.
2. The browser begins to load the html code and finds that there is a link tag in the head tag that refers to the external CSS file.
3. The browser sends out a request for a CSS file, and the server returns the CSS file.
4. The browser continues to load the body part of the html code, and the CSS file has been obtained, you can start rendering the page;
5. The browser finds an img tag in the code that refers to a picture and sends a request to the server. At this point, the browser will not wait until the picture is downloaded, but continue to render the code behind it.
6. The server returns the image file, because the image occupies a certain area, which affects the arrangement of the following paragraphs, so the browser needs to go back and re-render this part of the code.
7. The browser finds a script tag containing a line of Javascript code and runs it quickly.
8. The Javascript script executes this statement, which commands the browser to hide a div (style.display= "none") in the code. Cup utensils, suddenly missing such an element, browsers have to re-render this part of the code;
9. Finally, when / html arrives, the browser is full of tears...
10. Wait a minute. Before it's over, the user clicks the "skin change" button in the interface. Javascript lets the browser change the CSS path of the link tag.
11. The browser called all the div s, span, ul, li present here, "Everybody packs up, we have to come back..." The browser asks the server
Find a new CSS file and re-render the page.
Quote
At the end of this article, I quote a part of the explanation of browser's rendering mechanism from the magic Baidu search.