JS报错 Uncaught TypeError: undefined is not a function_百度知道
JS报错 Uncaught TypeError: undefined is not a function
下面这段JS代码，在其他浏览器可以弹出窗口，可在google浏览器却会出现这样错误.
$(function() {
$(&.packageDetails&).live(&click&,function() {
//alert($(this).attr(&parcelId&));
var url=&packageAction!getPackageDetails?packageId=&+$(t...
我有更好的答案
JS代码出现错误的解决方法如下所示。具体解决步骤：1、在HTML中调用错误的JS文件，然后用浏览器打开，打开后按下键盘上的F12，打开调试工具，打开后，我们查看控制台右上角偏左的位置，如箭头所示，在这个地方显示JS代码中有几处错误。2、找到控制台中的Console选项，用鼠标左键点击，如下图箭头已经指出。3、用鼠标点击后，会出现红色的错误提示，在提示中我们可以看到错误的原因，显示这个方法未定义。4、看控制台右上角我们会发现第几行出现错误，我这段代码是第28行出现错误，我们用鼠标左键点击箭头所指的地方。5、点击之后我们会找到代码中错误的地方用红色曲线标出，行数正好是28行。6、这样我们就可以在代码编辑器里面有针对性的修改JS代码了。
额，$(...).live()好像没有这个方法，不知道是不是jquery版本不同的问题，我用的bind代替的live用火狐firebug测了下，控制台还警告window.showModalDialog方法已废弃，可以用window.open代替，第一次帮人回答，⊙﹏⊙b汗，希望对你有帮助
本回答被提问者和网友采纳
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。&>&node.js 将多个js文件压缩到一个文件
node.js 将多个js文件压缩到一个文件
上传大小：8.94MB
node.js 将多个js文件压缩到一个文件
安装 node.js、java环境
1、org 原始文件
2、out 输出文件目录
1、将原始js 复制到org目录
2、编辑nodescript.js文件，按顺序配置需要压缩的文件列表
var filesToInclude = [
&org/zepto.pjax.js&,
&org/bdlib.js&,
&org/gslide.js&,
&org/mustache.js&
3、运行cmd命令，进入脚本目录，执行node nodescript.js命令
综合评分：3
下载个数：
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有4条
貌似没什么用
好像这个压缩包打不开了
这是google压缩js代码的jar吧，差评
zhoumh23212
综合评分：
积分/C币：3
综合评分：
积分/C币：3
综合评分：
积分/C币：3
积分&13150
VIP会员动态
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
node.js 将多个js文件压缩到一个文件
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
无法举报自己的资源
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
tianhuimin
举报的资源分：
请选择类型
资源无法下载 （ 404页面、下载失败、资源本身问题）
资源无法使用 （文件损坏、内容缺失、题文不符）
侵犯版权资源 （侵犯公司或个人版权）
虚假资源 （恶意欺诈、刷分资源）
含色情、危害国家安全内容
含广告、木马病毒资源
*详细原因：
node.js 将多个js文件压缩到一个文件EacooPHP开发框架新版发布基于TP5+Pjax加载+免费 - ThinkPHP框架
EacooPHP随着小版本迭代，功能也越来越完善，体验也更加优化。当前版本V1.0.9升级了应用管理中心，可在线安装插件模块等应用扩展详细内容：
1.CMS后台编辑内容，新增自定义元数据内容，对于文章添加个性化配置或字段更加灵活。可自定义添加字段如：淘宝链接，价格，推广地址，图片集等。
2.定制化wangeditor编辑器，结合文章页面内容编辑，和EacooPHP多媒体结合，可添加图片等。
3.丰富的开发组件：城市三级联动，文件或图片上传，图片选择器，富文本编辑器。
4.内置主流前端组件：artTemplate(JS模版引擎),artDialog(弹窗),datetimepicker(日期),echarts(图标),colorpicker(颜色选择器),fastclick,iCheck(复选框美化),ieonly,imgcutter,jquery-repeater,lazyload(延迟加载),select2,superslide,ueditor,wangeditor,webuploader,x-editable
4.更多....
EacooPHP是基于ThinkPHP5开发的一套轻量级开源免费WEB产品开发框架，追求高效，简单，灵活。 具有灵活的应用和插件机制，模块式开发，大大降低开发成本。集成多种灵活快速构建器组件，开发后台表单，列表更高效。统一了模块、插件、钩子、数据包之间的版本和依赖关系。
Auth权限管理：用户权限自由灵活
Builder构建：构建页面简单，高效
响应式体验：多设备适配
Pjax页面加载：提高性能，页面打开高效
模块化开发：模块独立，降低耦合
插件扩展：扩展，功能丰富
钩子机制：高度扩展
多主题化：个性化主题，个性化
前端组件：主流前端组件，直接使用
附件空间：多媒体管理，优化体验
在线应用中心
演示地址：
账号：admin
密码：123456
官方QQ群：（最新版完整包下载）
官网地址：
雨雾中抉择
积分：1948
ThinkPHP 是一个免费开源的，快速、简单的面向对象的 轻量级PHP开发框架 ，创立于2006年初，遵循Apache2开源协议发布，是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，也注重易用性。并且拥有众多的原创功能和特性，在社区团队的积极参与下，在易用性、扩展性和性能方面不断优化和改进，已经成长为国内最领先和最具影响力的WEB应用开发框架，众多的典型案例确保可以稳定用于商业以及门户级的开发。1 &!DOCTYPE html&
4 &meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
5 &meta name="keywords" content="周记【学校晚会篇】" /&&meta name="description" content="周记【学校晚会篇】 在这一周里我们13届的新生度过了在联合技校的第一个晚会，虽然我觉得这个晚会我觉得有点无聊，但是我觉得还是有点意思，怎么说都是我们的第一个晚会，总比在班上晚修爽多了。【哈哈哈哈啊哈哈哈哈哈】" /&&link rel="shortcut icon" href="../images/school003_icon.png" type="image/x-icon" /&
6 &link type="text/css" href="../css/template.css" rel="stylesheet" /&
7 &script type="text/javascript" src="../script/jquery-1.8.2.min.js"&&/script&
8 &script type="text/javascript" src="../script/jQuery.md5.js"&&/script&
9 &!--[if IE 6]&
10 &script type="text/javascript" src="../script/plugs/DD_belatedPNG_0.0.8a.js"&&/script&
&script type="text/javascript"&
DD_belatedPNG.fix('img');
14 &![endif]--&
15 &style type="text/css"&
16 #article_bar{
width: 960px;
height: auto;
text-align: center;
box-shadow:1px 1px 7px #222;
border-radius: 10px;
margin-bottom: 10px;
background: #37291C;
color: #fff;
26 #article_bar a{
color: #FFFA85;
29 #article_bar ul li{
width: 50px;
height: 40px;
line-height: 40px;
float: left;
margin-left: 28px;
36 #article_wrap{
position: relative;
39 #article_list{
width: 400px;
height: auto;
text-align: center;
float: right;
border-radius: 10px;
box-shadow:1px 1px 7px #222;
background: #37291C;
margin-bottom: 10px;
49 #works_list{
width: 400px;
height: auto;
text-align: center;
clear: right;
float: right;
border-radius: 10px;
box-shadow:1px 1px 7px #222;
background: #37291C;
margin-bottom: 10px;
60 #article_list_title,#works_list_title{
font-size: 1.4em;
height: 30px;
line-height: 28px;
width: 400px;
text-align: center;
color: #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
70 #article_list_content,#works_list_content{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
74 #article_list_content ul li a,#works_list_content ul li a{
color: #FFFA85;
77 #article_list_content ul li,#works_list_content ul li{
margin-left: 10px;
margin-bottom: 10px;
text-align: left;
82 #article_ajax_content{
width: 520px;
box-shadow:1px 1px 7px #222;
border-radius: 10px;
background: #37291C;
float: left;
margin-right: 20px;
padding: 10px;
margin-bottom: 10px;
color: #fff;
93 #article_ajax_content p{
margin-bottom: 20px;
96 #article_wrap .page_bar{
width: 340px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 10px;
103 #article_wrap .page_bar a{
color: #fff;
text-decoration: none;
107 #article_wrap .page_bar ul li{
float: left;
margin-left: 10px;
width: 20px;
height: 20px;
line-height: 20px;
background: #788C35;
color: #FFF;
border-radius: 5px;
117 #link_wish_wall{
float: right;
clear: right;
width: 400px;
text-align: left;
border-radius: 10px;
box-shadow:1px 1px 7px #222;
margin-top: 10px;
color: #fff;
background: #788C35;
margin-bottom: 10px;
129 #link_wish_wall a{
color: #fff;
text-decoration: none;
133 #link_wish_wall p{
margin:8px;
136 .time{
margin-left: 10px;
color: #fff;
font-size: 0.8em;
141 #article_comment{
width: 400px;
height: auto;
text-align: center;
clear: right;
float: right;
border-radius: 10px;
box-shadow:1px 1px 7px #222;
background: #37291C;
color: #fff;
display: none;
margin-bottom: 10px;
154 #article_comment_content{
width: 360px;
margin-left: auto;
margin-right: auto;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
margin-bottom: 5px;
text-align: left;
word-wrap:break-word;
overflow:hidden;
165 #article_comment_bottom{
width: 360px;
margin-left: auto;
margin-right: auto;
170 #article_comment_bottom_bar{
text-align: left;
173 #article_comment_submit,#article_comment_err{
margin-left: 6px;
176 #article_comment_err{
color: red;
179 #article_comment_submit{
cursor: pointer;
182 &/style&
183 &title&周记【学校晚会篇】&/title&&/head&
185 &body&
&div id="container"&
&script type="text/javascript"&
188 $(document).ready(function(){
$('#login_btn').click(function(){
type: "POST",
url: "http://www.school003.com/login.php",
data: "user="+$('#login_user').val()+"&pwd="+$.md5($('#login_pwd').val()),
success: function(msg){
if(msg != 1){
$('#login_error').html("用户名或密码错误！");
location.reload();
$('#login_exit').click(function(){
$.cookies.set('user','',{domain: '.school003.com',path:'/',expiresAt:new Date(2012,5,1),secure:false});//各参数要齐全（IE下不能设置Domian为localhost）否则无效
type: "POST",
url: "http://www.school003.com/unLogin.php",
data: "user="+$('#login_user').val(),
success: function(msg){
if(msg == "unLogin"){
window.location.href = "http://www.school003.com/";
$('#web_application').mouseover(function(){
$('#web_application_menu_list').show();
$('#web_application').mouseout(function(){
$('#web_application_menu_list').hide();
223 &/script&
&script type="text/javascript"&
var href = window.location.
function toQzoneLogin(){
window.location.href = "http://www.school003.com/quickLoad/qq/index.php?href=" +
230 &div id="head"&
&div id="head_bar"&
&div id="school003Logo"&
&img src="http://www.school003.com/images/school003Logo.png"&
&!-- 登陆窗口 --&
&div id='login_box'&
用户：&input type='text' id='login_user' class='login_textbox'&
密码：&input type='password' id='login_pwd' class='login_textbox'&
&input type='button' value='登陆' id='login_btn'&
&span id='qqLoginBtn'&&a href="#" onclick='toQzoneLogin()'&&img src="http://www.school003.com/images/qq_login.png"&&/a&&/span&
&span id='login_error'&&&/span&
&!-- 应用中心 --&
&div id="web_application"&
&div id="web_application_menu"&应用中心&/div&
&div id="web_application_menu_list"&
&li&&a href="http://www.school003.com"&本站主页&/a&&/li&
&li&&a href="http://www.school003.com/works/"&作品欣赏&/a&&/li&
&li&&a href="http://www.school003.com/photo/"&照片分享&/a&&/li&
&li&&a href="http://www.school003.com/article/"&文章分享&/a&&/li&
&li&&a href="http://j.school003.com"&上机练习&/a&&/li&
&li&&a href="http://www.school003.com/grade/"&在校成绩查询&/a&&/li&
262 &/div&
&div id="nav"&
&div id="nav_menu"&
&li&&a href="http://www.school003.com"&本站主页&/a&&/li&
&li&&a href="http://www.school003.com/works/"&作品欣赏&/a&&/li&
&li&&a href="http://www.school003.com/photo/"&照片分享&/a&&/li&
&li&&a href="http://www.school003.com/article/"&文章分享&/a&&/li&
&li&&a href="http://j.school003.com"&上机练习&/a&&/li&
&li&&a href="http://www.school003.com/grade/"&在校成绩查询&/a&&/li&
&li&&a href="http://www.school003.com/special/" class="active"&专辑&/a&&/li&
&div id="main"&
&div id="main_content"&
&div id='article_bar'&
&p&中计1331班成长笔记&/p&
&li&&a href='uedu_13ZJ3101-normal-1.html'&黄艳玲&/a&&/li&&li&&a href='uedu_13ZJ3102-normal-1.html'&成家乐&/a&&/li&&li&&a href='uedu_13ZJ3103-normal-1.html'&叶丽丽&/a&&/li&&li&&a href='uedu_13ZJ3104-normal-1.html'&潘欣婷&/a&&/li&&li&&a href='uedu_13ZJ3105-normal-1.html'&何远莲&/a&&/li&&li&&a href='uedu_13ZJ3106-normal-1.html'&黄本念&/a&&/li&&li&&a href='uedu_13ZJ3107-normal-1.html'&周伟锋&/a&&/li&&li&&a href='uedu_13ZJ3108-normal-1.html'&赖永枢&/a&&/li&&li&&a href='uedu_13ZJ3109-normal-1.html'&李仁福&/a&&/li&&li&&a href='uedu_13ZJ3110-normal-1.html'&梁旭超&/a&&/li&&li&&a href='uedu_13ZJ3111-normal-1.html'&符宏超&/a&&/li&&li&&a href='uedu_13ZJ3112-normal-1.html'&李天奇&/a&&/li&&li&&a href='uedu_13ZJ3113-normal-1.html'&廖华东&/a&&/li&&li&&a href='uedu_13ZJ3114-normal-1.html'&廖鹏程&/a&&/li&&li&&a href='uedu_13ZJ3115-normal-1.html'&庄滨瑜&/a&&/li&&li&&a href='uedu_13ZJ3116-normal-1.html'&李俊鹏&/a&&/li&&li&&a href='uedu_13ZJ3117-normal-1.html'&林良决&/a&&/li&&li&&a href='uedu_13ZJ3118-normal-1.html'&陈昌诚&/a&&/li&&li&&a href='uedu_13ZJ3119-normal-1.html'&林建浩&/a&&/li&&li&&a href='uedu_13ZJ3120-normal-1.html'&秦玉&/a&&/li&&li&&a href='uedu_13ZJ3121-normal-1.html'&林良彬&/a&&/li&&li&&a href='uedu_13ZJ3122-normal-1.html'&杨国绍&/a&&/li&&li&&a href='uedu_13ZJ3123-normal-1.html'&暨强安&/a&&/li&&li&&a href='uedu_13ZJ3124-normal-1.html'&傅彬&/a&&/li&&li&&a href='uedu_13ZJ3125-normal-1.html'&梁祥武&/a&&/li&&li&&a href='uedu_13ZJ3126-normal-1.html'&谢愉辉&/a&&/li&&li&&a href='uedu_13ZJ3127-normal-1.html'&胡承伟&/a&&/li&&li&&a href='uedu_13ZJ3128-normal-1.html'&苏广哲&/a&&/li&&li&&a href='uedu_13ZJ3129-normal-1.html'&刘煜&/a&&/li&&li&&a href='uedu_13ZJ3130-normal-1.html'&钟华青&/a&&/li&&li&&a href='uedu_13ZJ3131-normal-1.html'&许绍钟&/a&&/li&&li&&a href='uedu_13ZJ3132-normal-1.html'&莫进权&/a&&/li&&li&&a href='uedu_13ZJ3133-normal-1.html'&谭鹏&/a&&/li&&li&&a href='uedu_13ZJ3134-normal-1.html'&黄淦洪&/a&&/li&&li&&a href='uedu_13ZJ3135-normal-1.html'&袁润奇&/a&&/li&&li&&a href='uedu_13ZJ3136-normal-1.html'&王海涛&/a&&/li&&li&&a href='uedu_13ZJ3137-normal-1.html'&何景鑫&/a&&/li&&li&&a href='uedu_13ZJ3138-normal-1.html'&许金成&/a&&/li&&li&&a href='uedu_13ZJ3139-normal-1.html'&方璜&/a&&/li&&li&&a href='uedu_13ZJ3140-normal-1.html'&崔康华&/a&&/li&&li&&a href='uedu_13ZJ3141-normal-1.html'&张智锋&/a&&/li&&li&&a href='uedu_13ZJ3142-normal-1.html'&姚嘉豪&/a&&/li&&li&&a href='uedu_13ZJ3143-normal-1.html'&龙大林&/a&&/li&&li&&a href='uedu_13ZJ3144-normal-1.html'&唐权超&/a&&/li&&li&&a href='uedu_13ZJ3145-normal-1.html'&张其松&/a&&/li&&li&&a href='uedu_13ZJ3146-normal-1.html'&何珽薪&/a&&/li&&li&&a href='uedu_13ZJ3147-normal-1.html'&潘安&/a&&/li&&li&&a href='uedu_13ZJ3148-normal-1.html'&黄铎凯&/a&&/li&&li&&a href='uedu_13ZJ3149-normal-1.html'&吴彬林&/a&&/li&&li&&a href='uedu_13ZJ3150-normal-1.html'&陈俊杰&/a&&/li&&li&&a href='uedu_13ZJ3151-normal-1.html'&郑俊浩&/a&&/li&&li&&a href='uedu_13ZJ3152-normal-1.html'&候军建&/a&&/li&&li&&a href='uedu_13ZJ3153-normal-1.html'&黎家安&/a&&/li&&li&&a href='uedu_13ZJ3154-normal-1.html'&杨润钦&/a&&/li&&li&&a href='uedu_13ZJ3155-normal-1.html'&余俊&/a&&/li&&li&&a href='uedu_13ZJ3156-normal-1.html'&唐健&/a&&/li&&li&&a href='uedu_13ZJ3157-normal-1.html'&陈木林&/a&&/li&&li&&a href='uedu_13ZJ3158-normal-1.html'&林华增&/a&&/li&
&p style='clear:both'&&/p&
&div id="article_wrap"&
&div id="article_ajax_content"&&h2 style='text-align:margin-bottom:10px'&周记【学校晚会篇】&/h2&&p& 在这一周里我们13届的新生度过了在联合技校的第一个晚会，虽然我觉得这个晚会我觉得有点无聊，但是我觉得还是有点意思，怎么说都是我们的第一个晚会，总比在班上晚修爽多了。【哈哈哈哈啊哈哈哈哈哈】&/p&&/div&&div id='article_list'&&div id='article_list_title'&姚嘉豪&/div&&div id='article_list_content'&&ul&&li&&a href='uedu_13ZJ3142-article-001.html'&1.【我期待的技校生活】&/a&&span class='time'&&/span&&/li&&li&&a href='uedu_13ZJ3142-article-002.html'&2.周记1&/a&&span class='time'&&/span&&/li&&li&&a href='uedu_13ZJ3142-article-003.html'&3.一件有意义的事&/a&&span class='time'&&/span&&/li&&li&&a href='uedu_13ZJ3142-article-004.html'&4.周记&/a&&span class='time'&&/span&&/li&&li&&a href='uedu_13ZJ3142-article-011.html'&5.寒假作业（鲁滨孙漂流记读后感）&/a&&span class='time'&&/span&&/li&&li&&a href='uedu_13ZJ3142-article-005.html'&6.周记【学校晚会篇】&/a&&span class='time'&&/span&&/li&&li&&a href='uedu_13ZJ3142-article-006.html'&7.读后感想&/a&&span class='time'&&/span&&/li&&li&&a href='uedu_13ZJ3142-article-007.html'&8.第八周记&/a&&span class='time'&&/span&&/li&&li&&a href='uedu_13ZJ3142-article-008.html'&9.第九周记&/a&&span class='time'&&/span&&/li&&li&&a href='uedu_13ZJ3142-article-009.html'&10.第10周记&/a&&span class='time'&&/span&&/li&&/ul&&p style='clear:both'&&/p&&/div&&div class='page_bar'&&ul&&li&&a href='uedu_13ZJ3142-article-p1.html'&1&/a&&/li&&li&&a href='uedu_13ZJ3142-article-p2.html'&2&/a&&/li&&/ul&&p style='clear:both'&&/p&&/div&&/div&&div id='works_list'&&div id='works_list_title'&个人作品&/div&&div id='works_list_content'&&ul&&li&&a href='uedu_13ZJ3142-works-001.html'&1.姚嘉豪-自我介绍&/a&&span class='time'&&/span&&/li&&li&&a href='uedu_13ZJ3142-works-002.html'&2.现代人&/a&&span class='time'&&/span&&/li&&/ul&&p style='clear:both'&&/p&&/div&&div class='page_bar'&&ul&&/ul&&p style='clear:both'&&/p&&/div&&/div&&div id="link_wish_wall"&&a href="http://www.school003.com/article/wishWall.html"&&p style="font-size:1.4text-align:center"&许愿墙&/p&&p&1. wwwwwwwwwwwwwwwwww... &/p&&p&2. 11... &/p&&p&3. 好烦啊！感觉有好多... &/p&&/a&&/div&&div id="article_comment"&&p&留言板&/p&&div id="article_comment_content"&&/div&&div id="article_comment_bottom"&&p&&textarea name="textarea" cols="40" rows="2" id="article_comment_textarea" style="resize:none"&&/textarea&&/p&&p id="article_comment_bottom_bar"&&span id="article_comment_submit"&发表&/span&&span id="article_comment_err"&&/span&&/p&&/div&&/div&&div style="clear:float:width:400height:60line-height:60margin-bottom:10border-radius: 10box-shadow:1px 1px 7px #222;background: #37291C;text-align:"&&p&&a href="grade/" target="_blank" style="font-size:24color:#text-decoration:"&查看考试成绩&/a&&p&&/div&&p style="clear:both"&&/p&
289 &script type="text/javascript"&
291 var commentUser = '';
292 var typeId;
294 $('#article_bar a').live('click', function () {
var state = { href: $(this).attr('href'),title: $(this).text()};
if(!window.ActiveXObject){
history.pushState(state, document.title, state.href);
type: "GET",
url: "controller.php",
data: "id="+$(this).attr('href').substr(0,$(this).attr('href').indexOf('.'))+"&pjax=true",
success: function(msg){
$("#article_wrap").html(msg);
document.title = $(this).text();
return false;
312 $('.page_bar a').live('click', function () {
//ajax返回的href，在IE下自动加httP://www....，故需过滤
if (window.ActiveXObject) {
var thisHref = $(this).attr('href').substr($(this).attr('href').lastIndexOf("/")+1);
var thisHref = $(this).attr('href');
var state = { href: $(this).attr('href'),title: "分页内容"};
if(!window.ActiveXObject){
history.pushState(state, document.title, state.href);
type: "GET",
url: "controller.php",
data: "id="+thisHref.substr(0,thisHref.indexOf('.'))+"&pjax=true",
success: function(msg){
$("#article_list").html(msg);
$("#article_comment").hide();
return false;
336 $('#article_list_content a,#works_list_content a').live('click', function () {
//ajax返回的href，在IE下自动加httP://www....，故需过滤
if (window.ActiveXObject) {
var thisHref = $(this).attr('href').substr($(this).attr('href').lastIndexOf("/")+1);
var thisHref = $(this).attr('href');
var state = { href: thisHref,title: $(this).text().substr($(this).text().indexOf(".")+1)};
typeId = thisHref.substr(0,thisHref.indexOf("."));
$("#article_comment").show();
if(!window.ActiveXObject){
history.pushState(state, document.title, state.href);
type: "GET",
url: "controller.php",
data: "id="+thisHref+"&pjax=true",
success: function(msg){
$("#article_ajax_content").html(msg);
type: "POST",
url: "comment.php",
data: "typeId="+typeId+"&a=true",
success: function(msg){
$("#article_comment_content").html(msg);
$("#article_comment_textarea").val("");
$("#article_comment_err").html("");
document.title = $(this).text().substr($(this).text().indexOf(".")+1);
return false;
372 var diffUser = false;
373 if(!window.ActiveXObject){
374 window.addEventListener('popstate', function(e){
if (history.state){
var state = e.
var href = state.
var count = href.split("-");
//获取URL后退的内容
type: "GET",
url: "controller.php",
data: diffUser===false?"id="+href+"&pjax=true":"id="+href+"&pjax=true"+"&diffUser="+diffUser,
success: function(msg){
if (diffUser === false) {
switch(count[1]){
case "normal":
$("#article_wrap").html(msg);
diffUser = true;
case "works":
if (count[2].indexOf("p") === 0) {
$("#works_list").html(msg);
$("#article_ajax_content").html(msg);
diffUser = false;
case "article":
if (count[2].indexOf("p") === 0) {
$("#article_list").html(msg);
$("#article_ajax_content").html(msg);
diffUser = false;
$("#article_wrap").html(msg);
diffUser = false;
//获取同步的留言内容
typeId = href.substr(0,href.indexOf(".html"));
type: "POST",
url: "comment.php",
data: "typeId="+typeId+"&a=true",
success: function(msg){
$("#article_comment_content").html(msg);
$("#article_comment_textarea").val("");
$("#article_comment_err").html("");
$("#article_comment").show();
document.title = state.
428 }, false);
431 var allowSubmit = true;
432 $('#article_comment_submit').live('click', function () {
if ($.trim($("#article_comment_textarea").val()) == "") {$("#article_comment_err").html("内容不能为空");return false};
if (strlen($.trim($("#article_comment_textarea").val())) & 1500) {$("#article_comment_err").html("最多500个中文,1500个英文");return false};
if (commentUser == "") {$("#article_comment_err").html("请登陆");return false};
if (typeId == "") {$("#article_comment_err").html("该生未发表文章不能评论");return false};
if (allowSubmit === true) {
allowSubmit = false;
type: "POST",
url: "comment.php",
data: "typeId="+typeId+"&content="+$("#article_comment_textarea").val().replace(/\n/g, '')+"&commentUser="+commentUser,
success: function(msg){
$("#article_comment_content").html(msg);
$("#article_comment_textarea").val("");
$("#article_comment_err").html("");
allowSubmit = true;
453 function strlen(str){
var len = 0;
for (var i=0; i&str. i++) {
var c = str.charCodeAt(i);
//单字节加1
if ((c &= 0x0001 && c &= 0x007e) || (0xff60&=c && c&=0xff9f)) {
467 &/script&
469 &div id="ad_left"&
470 &/div&
471 &div id="ad_right"&
472 &/div&
&div id="scrollToTop" onclick="window.scrollTo('0','0')"&&/div&
475 &div id="scrollToBottom" onclick="window.scrollTo('0',document.body.scrollHeight)"&底部&/div&
478 &div id="footer"&
&div id="footer_bar"&
&div id="footer_bar_index"&&span&&a href="http://www.school003.com"&本站主页&/a&&/span&&/div&
&div id="footer_bar_works"&
&span&&a href="http://www.school003.com/works/"&作品欣赏&/a&&/span&
&div id="footer_bar_photo"&
&span&&a href="http://www.school003.com/photo/"&照片分享&/a&&/span&
&div id="footer_bar_article"&
&span&&a href="http://www.school003.com/article/"&文章分享&/a&&/span&
&div id="footer_bar_onExercises"&
&span&&a href="http://j.school003.com"&上机练习&/a&&/span&
&li&&a href="http://j.school003.com"&计算机应用基础&/a&&/li&
&div id="footer_bar_schoolGrade"&
&span&&a href="http://www.school003.com/grade/"&在校成绩查询&/a&&/span&
&div id="weixin"&
&img src="http://www.school003.com/images/weixin.jpg" width="100" height="100" alt="第三方校园网微信二维码" /&
&div id="footer_copyright"&
&p&Copyright& 2014 school003.com All Rights Reserved. 版权所有 QQ:
518 &script type="text/javascript"&
519 var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
520 document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F721f10eb7e8bde6edd79f06f' type='text/javascript'%3E%3C/script%3E"));
521 &/script&
&/p&&/div&
523 &/div&
524 &!-- Baidu Button BEGIN --&
525 &script type="text/javascript" id="bdshare_js" data="type=slide&img=8&pos=right&uid=6780851" &&/script&
526 &script type="text/javascript" id="bdshell_js"&&/script&
527 &script type="text/javascript"&
528 document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);
529 &/script&
530 &!-- Baidu Button END --&
531 &!-- Piwik --&
532 &script type="text/javascript"&
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u=(("https:" == document.location.protocol) ? "https" : "http") + "://www.school003.com/piwik//";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript';
g.defer=true; g.async=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
544 &/script&
545 &noscript&&p&&img src="http://www.school003.com/piwik/piwik.php?idsite=1" style="border:0" alt="" /&&/p&&/noscript&
546 &!-- End Piwik Code --&
547 &script&
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-', 'school003.com');
ga('send', 'pageview');
555 &/script&&/body&
556 &/html&
在访问现在很火的google plus时，细心的用户也许会发现页面之间的点击是通过ajax异步请求的，同时页面的URL发生了了改变。并且能够很好的支持浏览器的前进和后退。不禁让人想问，是什么有这么强大的功能呢？
HTML5里引用了新的API，就是history.pushState和history.replaceState，就是通过这个接口做到无刷新改变页面URL的。
与传统的AJAX的区别
传统的ajax有如下的问题：
虽然ajax可以无刷新改变页面内容，但无法改变页面URL
其次为了更好的可访问性，内容发生改变后，改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题
有的浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变
再有，ajax的使用对搜索引擎很不友好，往往蜘蛛爬到的区域是空的
为了解决传统ajax带来的问题，HTML5里引入了新的API，即：history.pushState, history.replaceState
可以通过pushState和replaceState接口操作浏览器历史，并且改变当前页面的URL。
pushState是将指定的URL添加到浏览器历史里，replaceState是将指定的URL替换当前的URL。
var state = {
title: title,
url: options.url,
otherkey: othervalue
window.history.pushState(state, document.title, url);
state对象除了要title和url之外，也可以添加其他的数据，比如：还想将一些发送ajax的配置给保存起来。
replaceState和pushState是相似的，不需要多做解释。
如何响应浏览器的前进、后退操作
window对象上提供了onpopstate事件，上面传递的state对象会成为event的子对象，这样就可以拿到存储的title和URL了。
window.addEventListener('popstate', function(e){
if (history.state){
var state = e.
//do something(state.url, state.title);
}, false);
这样就可以结合ajax和pushState完美的进行无刷新浏览了。
1、无法跨域，这个是必然的。引用曾经在网上看到的一句经典的话：&如果javascript可以跨域的话，那他就可以逆天了！&
2、state对象虽然可以存储很多自定义的属性，但值不能是个对象。
对应后端的一些处理
这种模式下除了当前使用ajax可以无刷新浏览外，还要保证直接请求改变的URL后也可以正常浏览，所以后端要对这些处理下。
1、对结合pushState的ajax可以发送一个特殊的头，如：&setRequestHeader(&PJAX&, &true&)。
2、后端获取到有PJAX=true的header时，将页面中通用的部分都不输出。比如：PHP可以通过下面的判断
function is_pjax(){
return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
虽然接口上只有pushState、replaceState、onpopstate，但在使用的时候还是要做很多处理的。
阅读(...) 评论()
