Load the page with Jquery. Load style without page clutter solution

2020-03-30 04:11:47
OfStack

Because I didn't know Jquery at the beginning, I always wanted to use Jquery. Load to load a new page, so as to achieve a local refresh. As a result, I found that the page loaded in was different from the original page.

The thing is, if you don't filter out some of the content, the direct load, will make the page chaos, such as new pages also exist. Body> Tag, once loaded, there are two of them on a page. Body> Tags are non-standard HTML. This is specified in the jquery.load() function. Typically, a loaded page needs to redefine CSS styles and add js events based on the elements of the loaded content. Such as:

Original page a.html:


<html>
<head><title></title></head>
<body>
<div id="container"></div>
</body></html>
 be load The page B.html : 
<html>
<head><title></title></head>
<style>.page-li {font-size:12px;color:blue}</style>
<body>
<div id="page">
<ol class="page-li">
<li>234123</li><li>341234</li><li>41234</li><li>412de34</li>
</ol>
</div>
</body></html>

Load the called jquery. Load () in the original page a.html, and then redefine the style of page-li on the original page:

Load (), CSS page:


<html>
<head><title></title></head>
<style>.page-li {font-size:12px;color:green}</style>
<body>
<div id="container"></div>
<script type="text/javascript">
$(function(){
$("#container").load("B.html #page",null,function(){alert(" Load the success ")});
});
</script>
</body></html>