在页面上动态的加载html页面,使用了jQuery的load方法火狐可以用,但是在谷歌浏览器不可以的一种解决方法,亲测有效
在页面上动态的加载html页面,使用了jQuery的load方法火狐可以用,但是在谷歌浏览器不可以的一种解决方法,亲测有效
直奔主题
刚开始的写法
<%@page contentType=“text/html”%>
<%@page language=“java” import=“java.util.*” pageEncoding=“UTF-8”%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"?/"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" type="text/css" href="http://localhost:8080/TestWebJsp/css/main.css">
<title>JSP Page</title>
<script src="http://localhost:8080/Photo/js/jquery.min.js"></script>
<!-- 引入js 在另一个项目中-->
<script type="text/javascript" src="http://localhost:8080/Photo/js/MD5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*这里就是神奇的清除缓存的方法,清除注释后,即可在谷歌浏览器正常显示
$.ajaxSetup({
cache: false
});*/
$("#topDiv").load('./index.html');
$("#bodyDiv").load('./index.html');
$("#pp").click(function() {
alert("点击了<%=request%>");
console.log("lo")
})
})
</script>
</head>
<!--<frameset rows="50,*" cols="*" border="0" framespacing="0">
<frame src="index.html" scrolling="no" noresize="noresize" id="topFrame" name="topFrame" />
<frame src="index.html" scrolling="auto" noresize="noresize" id="topFrame" name="topFrame" />
</frameset>-->
<body>
<div id="topDiv"></div>
<div id="bodyDiv"></div>
</body>
谷歌网页的效果
一片空白没有任何内容,打开开发者视图发现所有的资源响应码都是200,说明都有下载到,点击一个网页index.html,发现body竟然是空的,觉得可能是因为这里的问题,后查询了网上的讨论与见解,想着难道是因为缓存的问题?因此在js操作前先清除缓存(ps:那个方法的作用其实我不知道是不是叫清除缓存,按照借鉴人的叫法叫的),就一切正常了
神奇的“清除缓存的方法”
$.ajaxSetup({
cache: false
});
将上面的代码中这个方法的注释取消后的运行效果:
可以看到body中也终于出现了数据,亲测的