jquery.pjax.js局部刷新插件 script标签不加载的解决办法

发布于 2019-09-08  93 热度


问题发现

博客换了一个自带jquery.pjax.js主题,利用该插件可以实现页面的局部刷新。

但是使用时发现当加载带有script标签的博文时script没有并加载进来。

于是导致了原本写的一些工具使用pjax时无法正常工作的情况。

问题分析

于是自己便认真分析调试了一下pjax插件,发现问题出现在第714行:
var $body = $(parseHTML(data.match(/<body[^>]*>([\s\S.]*)<\/body>/i)[0]))
将html字符串转化为jqDom结点时,jq会自动把script标签提出到body标签下。

也就是说,如果我把script写在局部加载容器#container内,jq会把script从#container中提出来放到body里面。

然后pjax再从$body中取出#container中的结点集并把其写进原#container中,这样原本写在#container中的script标签就被忽略了。

解决办法

尝试了很多解决办法,最后还是采取了如下方法:

1.在大概705行:
var obj = {}, fullDocument = /<html/i.test(data)
下面插入:
data = data.replace(/<(\/?)script/g,"<$1textarea kxscr='1'");
作用是将script标签重命名为其他标签的名字,避免提出到body下。
2.在大概312行:
context.html(container.contents);
下面插入:


			var script = container.contents.find("textarea[kxscr='1']");

			function HTMLDecode(text) {
				var temp = document.createElement("div");
				temp.innerHTML = text;
				var output = temp.innerText || temp.textContent;
				temp = null;
				return output;
			}
			for (var i = 0; i < script.length; i++) {
				context.append('<script' + '>' + HTMLDecode(script[i].innerHTML) + '</' + 'script>');
				script[i].remove();
			}

作用是将被重命名的script的名字改回来。

改完之后保存一下,就再去访问带有script的博文发现运行正常啦。


我一直在开辟我的天空