如何防止页面加载重复的JS？

Question

我自己写了一个页面，除了公共部分的页头页脚以外，其余内容都是通过Ajax加载过来的，现在遇到了比较头疼的问题：

先说一下我加载的方式

$.ajax({
    type : "GET",
    url : hrefPage,
    dataType : 'html',
    cache : true, // (warning: this will cause a timestamp and will call the request twice)
    success : function(data) {
    window.history.pushState({"url":hrefPage}, "", hrefPage);
    //把所有内容替换至相应的div元素中
        container.html(data);
    },
    async : false
})

在我从远程获取的html代码中，包含了<script>标签，所以每次获取成功后都会在浏览器中看到以下请求：

JS能够在加载页面之后成功运行，这是我想要的。

但是问题来了：

我发现我连续点了几个页面之后（其中包含相同的页面）都是用Ajax获取。会发生重复调用JS情况，在FFdebug的页面中看到了这种一大堆东西：

现在我点击一个相同的页面会触发好多某一个事件（比如重复发送load请求，成倍的获取ajax数据）

因为我已经切换到另外一个页面了，但是还是会触发上一个页面的js导致报错

或者换一个说法，如何在切换页面的同时，把上一个页面也加载过的JS清除掉呢？

目前我还没有遇到过这种情况，百度了一晚上也没有找到什么有价值的信息，还希望诸位大神出谋划策，先谢谢各位了~

Answer 1

根据你的描述我感觉你的问题是出在调用ajax这边，没看过你具体的代码，具体情况要具体分析，我怀疑是jquery多次触发导致的。你是不是每次请求都是上一次的1倍。

试下ctrl+r刷新 然后再ajax请求看看，有没有出现你的状况，只点击一次。

ajax请求的话也要加上回调，再每次回调完成后再可请求下一次。

var aaa = true;

function ajax(url,callback){
     ajax({
       url : url,
       success : function(json){
          callback(json);
       }
     })
}

// 请求
$("#...").on("click",funciton(){
      if(aaa){
        aaa = false;
        ajax('',function(json){
           aaa = true;
        )} 
      }else{
          alert("等下再请求好不好")
      }
})

Answer 2

关键是你为什么这么做？？？非要这么做你就在获取到数据后，用正则把body的头尾都去掉就行了。

Answer 3

正常情况下，页面之间是独立的，上一个页面的JS跟下一个页面没什么关系。我也想知道答案。

Answer 4

你这相当于间接引入了jtml页面啊

Answer 5

你ajax获取的html代码里面有js，剥离开来。

Answer 6

也可以考虑在那个 js 里最前面的位置加一个全局变量，标识自己是否执行过。如果执行过，就退出。