欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-15 09:13:40
...
/**
 * 当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内容。

相关标签: JavaScript jQuery