Ajax载入HTML的jQuery插件(模拟iframe的效果)

本文由清尘发表于2015-04-28 19:42最后修改于2017-10-02属于jQuery分类

闲时写的一个Ajax载入HTML的jQuery插件  模拟iframe框架的效果。 有浏览器历史记录功能,可前进和后退查看历史记录页面。

点击查看演示

HMTL部分:

<div class="wp ctnbox">
	<ul class="nvlist" id="menu">
		<li><a href="link1.html">link1</a></li>
		<li><a href="link2.html">link2</a></li>
		<li><a href="link3.html">link3</a></li>
		<li><a href="link4.html">link4</a></li>
		<li><a href="link5.html">link5</a></li>
		<li><a href="link6.html">不存在页面时</a></li>
	</ul>
	<div class="iframebox" id="ajaxHtml">
		
	</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/ajaxHtml.js"></script>
<script>
	$(function(){
		$("#menu").ajaxHtml();
	});
</script>

CSS部分:

.wp{width: 960px; margin: 0 auto;}
.nvlist{float: left; display: inline; width: 200px; border: 1px solid #ccc;}
.nvlist a{color: #000; text-decoration: none; font-size: 18px; display: block; border-bottom: 1px solid #ccc; padding: 8px 0; text-align: center; text-transform: uppercase;}
.nvlist a:hover,.nvlist a.hover{color: red;}
.iframebox{float:right; display: inline; width: 730px; min-height: 500px; _height: 500px; border: 1px solid #ccc;}
#page{padding:8px 20px;}

JS部分:
ajaxHtml.js的内容:

/**
* @author shine
* @blog https://blog.ipsfan.com/
* @version 0.1
*/ 
(function($){
	$.fn.ajaxHtml=function(options){
		var defaults={
			loader:"#ajaxHtml",
			menuBtn:"a"
		};
		opts=$.extend(defaults,options);
		var ajaxHtml=$(opts.loader);
		var menuBtn=this.find(opts.menuBtn);
		var deurl=menuBtn.eq(0).attr("href");
		var defaultpage=deurl.slice(0,deurl.length-5);
		menuBtn.bind("click",function(){
			menuBtn.removeClass("hover");
			$(this).addClass("hover");
			var url=$(this).attr("href");
			ajaxHtml.html("正在加载页面...");
			ajaxHtml.load(url+" #page",function(response,status,xhr){
				if(status=="error"){
					ajaxHtml.html("页面不存在");
				};
				if(status=="timeout"){
					ajaxHtml.html("请求超时,请重新检查网络。");
				};
				var href=window.location.href;
				var arr=href.split("?");
				window.history.pushState("","",arr[0]+"?"+url.slice(0,url.length-5));
			});
			return false;
		});

		function pageLoad(){
			var href=window.location.href;
			var arr=href.split("?");
			if(!arr[1]){
				arr[1]=defaultpage;
			};
			ajaxHtml.html("正在加载页面...");
			ajaxHtml.load(arr[1]+'.html #page',function(response,status,xhr){
				if(status=="error"){
					ajaxHtml.html("页面不存在");
				};
				if(status=="timeout"){
					ajaxHtml.html("请求超时,请重新检查网络。");
				};
			});
			menuBtn.each(function(index,element){
				var url=$(this).attr("href");
				url=url.slice(0,url.length-5);
				if(url==arr[1]){
					menuBtn.removeClass("hover");
					$(this).addClass("hover");
				}
			});
		};

		pageLoad();
		window.onpopstate=function(){
			pageLoad();
		};

	};
})(jQuery)

可选参数:

$(function(){
		$("#menu").ajaxHtml({
			 /*加载HTML的容器DIV*/
			loader:"#ajaxHtml",
			 /*加载HTML的按钮选择器*/
			menuBtn:"a" 
		});
	});