0

现在有个2列的DIV布局页面,左侧是垂直导航,右边是内容显示区域,这个页面的文件是main.html

然后在这个页面里用AJAX来LOAD一个页面A.html到内容显示的DIV里。

问题是main.html和A.html的<head>里都引用了相同的JS文件,会引起变量重定义等问题吗?

我总感觉引用一次就可以了啊,还是说现在这么做是没问题的?

4个回答

1

代码贴上:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
   p{
       background: red;
       font-size: 20px
       ;
       color: white;
   }
   p a{
    float: right;
   }
   img{
       display: inline-block;min-width: 100%; width: auto;
   }
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
<p>
    传承了多年的北京风味老字号,使
    煎饼更加酥脆饱满。来吃的人络绎
    不绝,每每长龙的队
    传承了多年的北京风味老字号,使
    煎饼更加酥脆饱满。来吃的人络绎
    不绝,每每长龙的队
    <a>更多></a>
    </p>
    


 <div id="div1"><h2>使用jQuery AJAX改变此处内容</h2></div>
<button>改变外部内容</button>
</body>
<script type="text/javascript">

     $("button").on("click",function(){
         $("#div1 h2").load("2.html")
     })

 var a=1;
 console.log(a);
</script>
</html>
<!DOCTYPE html>
<html>

<head>
    <title>滑稽</title>
    <meta charset="UTF-8">
    <script src="jquery.min.js"></script>
</head>

<body>
    <div id="demo">

    我是引用内容</div>
</body>
<script type="text/javascript">
  var a=100;
  console.log(100);
</script>
</html>

这是两个文件 1.html 2.html 我现在让1.html加载2.html里边的内容

$("#div1 h2").load("2.html")

这两个文件为了满足你的要求 我同时引用了jQuery文件 而且同时定义了a 这个变量

效果图:

在network 看一下请求:

再看一下控制台:

结论:
network 中发现 相同的jQuery文件 还是重复加载了
在console中 发现定义相同的var a全局变量 依旧 全都打印出来了
但是并没有出现 错误 所以 应该是不会引起变量重定义的问题

0

如果加载的地址是同一个,浏览器是不会重复加载的

0

会引起变量重定义问题

0

如果你用 jQuery,它的 $.fn.load() 在指定了 selector 的情况下,是不会执行脚本的

参考 jQuery.load 的文档

撰写答案