jquery实现页面嵌套include

青旅半醒 2021-09-14 18:48 495阅读 0赞

类似PHP模板引擎一样，使用include引入公共文件

一.注意

1.使用方式

引入js--jquery.include.js(存成插件)

jQuery.fn.extend({
        include: function (path) {
            var _this = $(this);
            
            $.get(path, function (html) {
                _this.replaceWith(html);
            });
    
            return 0;
        }
    });

在HTML 页面加入

注意：script 中 id 必须跟$("\#block\_font").include(...);的id是一样，页面的名称可以随意

2.注意点

1.对于插入位置，这个应该是最不好办的了。

如果直接在位置中插入<div id="block\_font"></div>  。这样的话，会感觉有点乱，因为为了用这个函数我们需要写个script标签，

所以我建议是把jQuery-2.1.4.min.js的放在头部 ，然后其他的插件照样放在底部，这样也不会影响js渲染。然后那个位置需要子页面的内容就把 底下这段代码放进去。

2.子页面fontback.html 的内容如果有js参与 ，记得把js那部分的内容直接放到fontback.html中，否则无效。

二.例子

1.首页

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>jquery实现静态页面include</title>
    	<script type="text/javascript" src="js/jQuery-2.1.4.min.js" ></script>
    	<style>
    		body{
    			padding: 40px 0;
    			font-family: 'bebas', sans-serif;
    			background-color: #00BCD4;
    			color: #fff;
    			text-align: center;
    			width: 400px;
    		}
    		.includecnt{
    			border: 3px solid #000;
        		padding: 20px;
        		margin: 20px;
    		}
    	</style>
    </head>
    <body>
    <div id="jgcx-main">
    	<form role="form" class="jgcx-main_form clearfix">
    		<h2>form获取数据</h2>
    	    <div class="jgcx-main_form_row jgcx-main_form_row-sty1">
    	        <label>姓名:</label><span data-name="brxm00"></span>
    	    </div>
    	    <div class="jgcx-main_form_row jgcx-main_form_row-sty2">
    	        <label>条 形 码:</label><span data-name="txm000"></span>
    	    </div>
    	</form>
    </div>
    <div class="includecnt">
    	<h2>jquery实现静态页面include</h2>
    	<script type="text/javascript" id="block_font">
    	$(function () {
    		$("#block_font").include("fontback.html");
    	})
    	</script>
    </div>
    <div id="footer">底部</div>
    <script type="text/javascript" src="js/js.js" ></script>
    <script type="text/javascript">
    $(function () {
    	var oData={
    		"brxm00": "黄恒林", 
    		"txm000": "201711111111"
    	}; 
        $("#jgcx-main").setForm(oData);  
    })
    </script>
    </body>
    </html>

2.fontback.html

3.js.js (我把引入子页面的函数放在公共js里面，并没有单独存在一个js里面)

jQuery.fn.extend({
    	//引入子页面函数
        include: function (path) {
            var _this = $(this);
            
            $.get(path, function (html) {
                _this.replaceWith(html);
            });
    
            return 0;
        },
        //获取json数据显示在span中
        setForm:function(jsonValue){
        	var obj=this;  
    	    $.each(jsonValue, function (name, ival) {  
    	        obj.find("span[data-name=" + name + "]").text(ival);   
    	    });   
        }
    });

4.效果

![20180211151300412][]

[20180211151300412]: /images/20210813/60281cafeaa94269a34371845ecc67e8.png