jquery给div或者p添加href自动加载链接内容插件

/**
 * 当class为page的div，p，或者其他的非a标签包含href属性时
 * 通过该插件自动的ajax包含的内容
 * 当需要改变div的href属性时，需要手动的trigger触发hrefChange自定义事件
 * $("#test").attr("href", "bee1314.iteye.com");
 * $("#test").trigger("hrefChange")
 */
(function($) {
	// load content and you should be care context
	function load(context) {
		var nodeName = context.nodeName;
		var href = $(context).attr("href")
		console.log("nodeName=>" + nodeName + "; href=>" + href);
		if (nodeName != "a" && nodeName != "A" && href != "") {
			$(context).load(href);
		}
	}

	$(".page").each(function() {
		//load content
		load(this);
		//auto reload content when href changed
		var self = this;
		$(self).bind("hrefChange", function() {
			load(self);
		})
	})
})(jQuery);

 或许将href属性改成url属性更好，这样可以避开判断是不是a标签。

 

使用方式：

1. 添加class的属性为page，插件会根据page属性进行过滤查找

<!--该div中就会自动加载href链接的内容，是不是有iframe的赶脚-->

<div id="test" class="page" href="bee1314.iteye.com"> 

 

当需要改变href的链接时候：

$("#test").attr("href", "www.github.com")

$("#test").trigger("hrefChange");  //通过jQuery的自定义事件实现让插件帮助我们重新reload div内容。